/* ============================================================
   DATAMIND TECHNOLOGIES
   PRODUCT DETAIL DESIGN SYSTEM

   Shared product-page architecture for:
   - Cosmetology License
   - FashionApp
   - Booking System
   - Automation Platform
   - Future DataMind products

   BRAND SOURCE:
   Global colors, typography, spacing, radius and UI tokens
   are inherited from styles.css.

   Depends on:
   - styles.css
   - header.css
   - footer.css
   ============================================================ */


/* ============================================================
   PRODUCT DETAIL TOKENS
   ============================================================ */

:root {

    /* Brand */
    --dm-product-green:
        var(--color-primary);

    --dm-product-green-hover:
        var(--color-primary-hover);

    --dm-product-accent:
        var(--color-accent);


    /* Dark brand surfaces */
    --dm-product-green-dark:
        #0F5F2F;

    --dm-product-green-deep:
        #0A3D20;

    --dm-product-green-deeper:
        #062A16;


    /* Soft brand surfaces */
    --dm-product-green-soft:
        rgba(22, 163, 74, .10);

    --dm-product-green-muted:
        #86EFAC;


    /* Text */
    --dm-product-text:
        var(--color-text-main);

    --dm-product-text-secondary:
        var(--color-text-secondary);

    --dm-product-text-muted:
        var(--color-text-muted);


    /* Surfaces */
    --dm-product-white:
        #FFFFFF;

    --dm-product-cream:
        var(--color-bg-main);

    --dm-product-cream-alt:
        var(--color-bg-light);

    --dm-product-section:
        var(--color-bg-section);


    /* Borders */
    --dm-product-border:
        var(--color-border);

    --dm-product-border-light:
        rgba(31, 41, 55, .10);

    --dm-product-border-dark:
        rgba(255, 255, 255, .16);


    /* Shadows */
    --dm-product-shadow:
        0 24px 70px rgba(15, 61, 32, .14);

    --dm-product-shadow-soft:
        0 16px 40px rgba(15, 61, 32, .08);


    /* Corporate product typography */
    --dm-product-hero-heading:
        clamp(
            2.35rem,
            3.2vw,
            3rem
        );

    --dm-product-section-heading:
        clamp(
            1.75rem,
            2.4vw,
            2.25rem
        );

    --dm-product-feature-heading:
        clamp(
            1.9rem,
            2.7vw,
            2.5rem
        );

}


/* ============================================================
   SHARED PRODUCT TYPOGRAPHY
   ============================================================ */

.dm-product-detail-kicker,
.dm-product-detail-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color:
        var(--dm-product-green);

    font-size: .74rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .11em;

    text-transform: uppercase;

}


.dm-product-detail-kicker::before,
.dm-product-detail-eyebrow::before {

    content: "";

    width: 26px;

    height: 2px;

    flex: 0 0 auto;

    background:
        currentColor;

}


.dm-product-detail-kicker-light {

    color:
        var(--dm-product-green-muted);

}


.dm-product-detail-kicker-light::before {

    background:
        currentColor;

}


.dm-product-detail-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    min-height: 29px;

    padding:
        5px 10px;

    color:
        var(--dm-product-green-dark);

    background:
        var(--dm-product-green-soft);

    border-radius: 999px;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .08em;

}


/* ============================================================
   PRODUCT HERO
   ============================================================ */

.dm-product-detail-hero {

    position: relative;

    min-height: 640px;

    display: flex;

    align-items: stretch;

    overflow: hidden;

    background:
        var(--dm-product-green-deep);

}


.dm-product-detail-hero-media {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.dm-product-detail-hero-media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


.dm-product-detail-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(6, 42, 22, .95) 0%,
            rgba(6, 42, 22, .86) 38%,
            rgba(10, 61, 32, .56) 67%,
            rgba(10, 61, 32, .22) 100%
        );

}


.dm-product-detail-hero-container {

    position: relative;

    z-index: 2;

    min-height: 640px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-top: 105px;

    padding-bottom: 72px;

}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.dm-product-detail-breadcrumb {

    position: absolute;

    top: 42px;

    left:
        var(--space-md);

    right:
        var(--space-md);

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    color:
        rgba(255, 255, 255, .72);

    font-size: .75rem;

    font-weight: 500;

}


.dm-product-detail-breadcrumb a {

    color:
        rgba(255, 255, 255, .78);

    text-decoration: none;

    transition:
        color .2s ease;

}


.dm-product-detail-breadcrumb a:hover,
.dm-product-detail-breadcrumb a:focus-visible {

    color:
        var(--dm-product-white);

}


.dm-product-detail-breadcrumb
span[aria-current="page"] {

    color:
        var(--dm-product-white);

}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.dm-product-detail-hero-content {

    width:
        min(820px, 100%);

}


.dm-product-detail-hero
.dm-product-detail-eyebrow {

    color:
        var(--dm-product-green-muted);

}


.dm-product-detail-hero
.dm-product-detail-eyebrow::before {

    background:
        currentColor;

}


.dm-product-detail-hero h1 {

    max-width: 820px;

    margin:
        0 0 22px;

    color:
        var(--dm-product-white);

    font-size:
        var(--dm-product-hero-heading);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -.025em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

    hyphens: none;

}


.dm-product-detail-hero-lead {

    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, .82);

    font-size:
        clamp(
            .98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;

}


/* ============================================================
   HERO ACTIONS
   ============================================================ */

.dm-product-detail-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


.dm-product-detail-primary-button,
.dm-product-detail-secondary-button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        13px 20px;

    border-radius:
        var(--radius-md);

    font-size: .88rem;

    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.dm-product-detail-primary-button {

    color:
        var(--dm-product-white);

    background:
        var(--dm-product-green);

    border:
        1px solid
        var(--dm-product-green);

}


.dm-product-detail-primary-button:hover,
.dm-product-detail-primary-button:focus-visible {

    background:
        var(--dm-product-green-hover);

    border-color:
        var(--dm-product-green-hover);

    transform:
        translateY(-2px);

}


.dm-product-detail-secondary-button {

    color:
        var(--dm-product-white);

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid
        rgba(255, 255, 255, .38);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.dm-product-detail-secondary-button:hover,
.dm-product-detail-secondary-button:focus-visible {

    background:
        rgba(255, 255, 255, .15);

    border-color:
        rgba(255, 255, 255, .70);

    transform:
        translateY(-2px);

}


/* ============================================================
   PRODUCT INTRODUCTION
   ============================================================ */

.dm-product-detail-intro {

    padding:
        96px 0;

    background:
        var(--dm-product-cream);

}


.dm-product-detail-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    gap:
        clamp(
            48px,
            7vw,
            100px
        );

    align-items: start;

}


.dm-product-detail-intro h2 {

    max-width: 500px;

    margin: 0;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-intro-copy {

    max-width: 620px;

}


.dm-product-detail-intro-copy p {

    margin:
        0 0 18px;

    color:
        var(--dm-product-text-secondary);

    font-size: .98rem;

    line-height: 1.75;

}


.dm-product-detail-intro-copy p:last-child {

    margin-bottom: 0;

}


.dm-product-detail-intro-copy
.dm-product-detail-lead {

    color:
        var(--dm-product-text);

    font-size: 1.08rem;

    line-height: 1.7;

}


/* ============================================================
   PRODUCT STATEMENT
   ============================================================ */

.dm-product-detail-statement {

    padding:
        0 0 96px;

    background:
        var(--dm-product-cream);

}


.dm-product-detail-statement-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    min-height: 560px;

    overflow: hidden;

    background:
        var(--dm-product-white);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--dm-product-shadow-soft);

}


.dm-product-detail-statement-media {

    min-height: 560px;

    overflow: hidden;

    background:
        var(--dm-product-green-deep);

}


.dm-product-detail-statement-media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s
        cubic-bezier(.2, .7, .2, 1);

}


.dm-product-detail-statement-grid:hover
.dm-product-detail-statement-media img {

    transform:
        scale(1.025);

}


.dm-product-detail-statement-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        clamp(
            42px,
            5vw,
            68px
        );

    background:
        var(--dm-product-white);

}


.dm-product-detail-statement-content h2 {

    max-width: 500px;

    margin:
        0 0 20px;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-statement-content p {

    max-width: 540px;

    margin:
        0 0 16px;

    color:
        var(--dm-product-text-secondary);

    font-size: .98rem;

    line-height: 1.75;

}


.dm-product-detail-statement-content p:last-child {

    margin-bottom: 0;

}


/* ============================================================
   PRODUCT TAGS
   ============================================================ */

.dm-product-detail-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;

}


.dm-product-detail-tags span {

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding:
        6px 12px;

    color:
        var(--dm-product-green-dark);

    background:
        var(--dm-product-green-soft);

    border:
        1px solid
        rgba(22, 163, 74, .14);

    border-radius: 999px;

    font-size: .74rem;

    font-weight: 600;

}


/* ============================================================
   SHARED SECTION HEADING
   ============================================================ */

.dm-product-detail-section-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, .72fr);

    gap:
        clamp(
            36px,
            6vw,
            80px
        );

    align-items: end;

    margin-bottom: 48px;

}


.dm-product-detail-section-heading h2 {

    max-width: 650px;

    margin: 0;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-section-heading > p {

    max-width: 500px;

    margin: 0;

    justify-self: end;

    color:
        var(--dm-product-text-secondary);

    font-size: .96rem;

    line-height: 1.7;

}


/* ============================================================
   AUDIENCE
   ============================================================ */

.dm-product-detail-audience {

    padding:
        96px 0;

    background:
        var(--dm-product-cream-alt);

}


.dm-product-detail-audience-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


.dm-product-detail-audience-card {

    min-height: 290px;

    display: flex;

    flex-direction: column;

    padding: 30px;

    color:
        var(--dm-product-text);

    background:
        rgba(255, 255, 255, .70);

    border:
        1px solid
        var(--dm-product-border);

    border-radius:
        var(--radius-lg);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.dm-product-detail-audience-card:hover {

    transform:
        translateY(-4px);

    background:
        var(--dm-product-white);

    border-color:
        rgba(22, 163, 74, .32);

    box-shadow:
        var(--dm-product-shadow-soft);

}


.dm-product-detail-audience-card h3 {

    margin:
        auto 0 14px;

    color:
        var(--dm-product-text);

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -.015em;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-audience-card p {

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .94rem;

    line-height: 1.7;

}


/* ============================================================
   LICENSE LIFECYCLE
   ============================================================ */

.dm-product-detail-lifecycle {

    padding:
        96px 0;

    background:
        var(--dm-product-white);

}


.dm-product-detail-lifecycle-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-top:
        1px solid
        var(--dm-product-border);

    border-bottom:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-lifecycle-card {

    position: relative;

    min-height: 270px;

    padding:
        28px 20px;

    border-right:
        1px solid
        var(--dm-product-border);

    transition:
        background .2s ease;

}


.dm-product-detail-lifecycle-card:last-child {

    border-right: 0;

}


.dm-product-detail-lifecycle-card:hover {

    background:
        var(--dm-product-green-soft);

}


.dm-product-detail-lifecycle-card > span {

    display: block;

    margin-bottom: 56px;

    color:
        var(--dm-product-green);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .10em;

}


.dm-product-detail-lifecycle-card h3 {

    margin:
        0 0 10px;

    color:
        var(--dm-product-text);

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.3;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-lifecycle-card p {

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .84rem;

    line-height: 1.65;

}


/* ============================================================
   FULL-WIDTH PRODUCT FEATURE
   ============================================================ */

.dm-product-detail-feature {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--dm-product-green-deep);

}


.dm-product-detail-feature-media {

    position: absolute;

    inset: 0;

}


.dm-product-detail-feature-media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.dm-product-detail-feature-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 42, 22, .95) 0%,
            rgba(10, 61, 32, .82) 48%,
            rgba(10, 61, 32, .34) 100%
        );

}


.dm-product-detail-feature-container {

    position: relative;

    z-index: 2;

    min-height: 620px;

    display: flex;

    align-items: center;

}


.dm-product-detail-feature-card {

    width:
        min(600px, 100%);

    padding:
        clamp(
            38px,
            5vw,
            60px
        );

    color:
        var(--dm-product-white);

    background:
        rgba(10, 61, 32, .90);

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--dm-product-shadow);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


.dm-product-detail-feature-card h2 {

    margin:
        0 0 20px;

    color:
        var(--dm-product-white);

    font-size:
        var(--dm-product-feature-heading);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -.025em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-feature-card p {

    margin:
        0 0 16px;

    color:
        rgba(255, 255, 255, .80);

    font-size: .96rem;

    line-height: 1.75;

}


.dm-product-detail-feature-card p:last-child {

    margin-bottom: 0;

}


/* ============================================================
   CORE CAPABILITIES
   ============================================================ */

.dm-product-detail-capabilities {

    padding:
        96px 0;

    background:
        var(--dm-product-cream);

}


.dm-product-detail-capability-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

}


.dm-product-detail-capability-card {

    min-height: 280px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    color:
        var(--dm-product-text);

    background:
        var(--dm-product-white);

    border:
        1px solid
        var(--dm-product-border);

    border-radius:
        var(--radius-lg);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.dm-product-detail-capability-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(22, 163, 74, .35);

    box-shadow:
        var(--dm-product-shadow-soft);

}


.dm-product-detail-capability-card h3 {

    margin:
        auto 0 12px;

    color:
        var(--dm-product-text);

    font-size: 1.18rem;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -.015em;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-capability-card p {

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .9rem;

    line-height: 1.7;

}


/* ============================================================
   PROFESSIONAL EXPERIENCE
   ============================================================ */

.dm-product-detail-experience {

    padding:
        96px 0;

    background:
        var(--dm-product-white);

}


.dm-product-detail-experience-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            48px,
            7vw,
            90px
        );

    align-items: center;

}


.dm-product-detail-experience-content h2 {

    max-width: 520px;

    margin:
        0 0 20px;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-experience-content > p {

    max-width: 540px;

    margin:
        0 0 26px;

    color:
        var(--dm-product-text-secondary);

    font-size: .98rem;

    line-height: 1.75;

}


.dm-product-detail-experience-media {

    min-height: 540px;

    overflow: hidden;

    background:
        var(--dm-product-green-deep);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--dm-product-shadow-soft);

}


.dm-product-detail-experience-media img {

    width: 100%;

    height: 100%;

    min-height: 540px;

    display: block;

    object-fit: cover;

}


/* ============================================================
   CHECKLIST
   ============================================================ */

.dm-product-detail-checklist {

    display: grid;

    gap: 0;

    border-top:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-checklist > div {

    display: grid;

    grid-template-columns:
        26px 1fr;

    gap: 13px;

    align-items: start;

    padding:
        16px 0;

    border-bottom:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-checklist span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    margin-top: 1px;

    color:
        var(--dm-product-green);

    background:
        var(--dm-product-green-soft);

    border-radius: 50%;

    font-size: .7rem;

    font-weight: 800;

}


.dm-product-detail-checklist p {

    margin: 0;

    color:
        var(--dm-product-text);

    font-size: .9rem;

    font-weight: 500;

    line-height: 1.55;

}


/* ============================================================
   ADMINISTRATIVE EXPERIENCE
   ============================================================ */

.dm-product-detail-admin {

    padding:
        96px 0;

    background:
        var(--dm-product-cream-alt);

}


.dm-product-detail-admin-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    gap:
        clamp(
            48px,
            7vw,
            90px
        );

    align-items: center;

}


.dm-product-detail-admin-media {

    min-height: 540px;

    overflow: hidden;

    background:
        var(--dm-product-green-deep);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--dm-product-shadow-soft);

}


.dm-product-detail-admin-media img {

    width: 100%;

    height: 100%;

    min-height: 540px;

    display: block;

    object-fit: cover;

}


.dm-product-detail-admin-content h2 {

    max-width: 540px;

    margin:
        0 0 20px;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-admin-content > p {

    max-width: 540px;

    margin:
        0 0 26px;

    color:
        var(--dm-product-text-secondary);

    font-size: .98rem;

    line-height: 1.75;

}


/* ============================================================
   VERIFICATION
   ============================================================ */

.dm-product-detail-verification {

    padding:
        96px 0;

    color:
        var(--dm-product-white);

    background:
        linear-gradient(
            135deg,
            var(--dm-product-green-deep),
            var(--dm-product-green-deeper)
        );

}


.dm-product-detail-verification-card {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .9fr);

    gap:
        clamp(
            44px,
            7vw,
            90px
        );

    align-items: center;

}


.dm-product-detail-verification-card h2 {

    max-width: 620px;

    margin:
        0 0 18px;

    color:
        var(--dm-product-white);

    font-size:
        var(--dm-product-feature-heading);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -.025em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-verification-card
> div:first-child > p {

    max-width: 600px;

    margin: 0;

    color:
        rgba(255, 255, 255, .76);

    font-size: .96rem;

    line-height: 1.75;

}


.dm-product-detail-verification-message {

    padding:
        clamp(
            30px,
            4vw,
            44px
        );

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        var(--radius-xl);

}


.dm-product-detail-verification-message > span {

    display: block;

    margin-bottom: 22px;

    color:
        var(--dm-product-green-muted);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

}


.dm-product-detail-verification-message strong {

    display: block;

    margin-bottom: 16px;

    color:
        var(--dm-product-white);

    font-size:
        clamp(
            1.45rem,
            2vw,
            2rem
        );

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-verification-message p {

    margin: 0;

    color:
        rgba(255, 255, 255, .70);

    font-size: .94rem;

    line-height: 1.7;

}


/* ============================================================
   PRODUCT BENEFITS
   ============================================================ */

.dm-product-detail-benefits {

    padding:
        96px 0;

    background:
        var(--dm-product-white);

}


.dm-product-detail-benefit-grid {

    border-top:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-benefit-grid article {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 26px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-benefit-grid article > span {

    color:
        var(--dm-product-green);

    font-size: .74rem;

    font-weight: 700;

    letter-spacing: .10em;

}


.dm-product-detail-benefit-grid h3 {

    margin:
        0 0 8px;

    color:
        var(--dm-product-text);

    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.4rem
        );

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -.015em;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-benefit-grid p {

    max-width: 700px;

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .94rem;

    line-height: 1.7;

}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.dm-product-detail-process {

    padding:
        96px 0;

    background:
        var(--dm-product-cream-alt);

}


.dm-product-detail-process-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    overflow: hidden;

    background:
        var(--dm-product-white);

    border:
        1px solid
        var(--dm-product-border);

    border-radius:
        var(--radius-xl);

}


.dm-product-detail-process-grid article {

    min-height: 290px;

    padding: 26px;

    border-right:
        1px solid
        var(--dm-product-border);

    transition:
        background .2s ease;

}


.dm-product-detail-process-grid article:last-child {

    border-right: 0;

}


.dm-product-detail-process-grid article:hover {

    background:
        var(--dm-product-green-soft);

}


.dm-product-detail-process-grid article > span {

    display: block;

    margin-bottom: 68px;

    color:
        var(--dm-product-green);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .10em;

}


.dm-product-detail-process-grid h3 {

    margin:
        0 0 11px;

    color:
        var(--dm-product-text);

    font-size: 1.08rem;

    font-weight: 600;

    line-height: 1.3;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-process-grid p {

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .85rem;

    line-height: 1.65;

}


/* ============================================================
   PRODUCT ECOSYSTEM
   ============================================================ */

.dm-product-detail-ecosystem {

    padding:
        96px 0;

    background:
        var(--dm-product-cream);

}


.dm-product-detail-ecosystem-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            48px,
            7vw,
            100px
        );

    align-items: start;

}


.dm-product-detail-ecosystem-grid h2 {

    max-width: 540px;

    margin:
        0 0 18px;

    color:
        var(--dm-product-text);

    font-size:
        var(--dm-product-section-heading);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.02em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-ecosystem-grid
> div:first-child > p {

    max-width: 520px;

    margin: 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .96rem;

    line-height: 1.75;

}


.dm-product-detail-ecosystem-links {

    border-top:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-ecosystem-links a {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 18px;

    align-items: center;

    min-height: 70px;

    padding:
        17px 4px;

    color:
        var(--dm-product-text);

    border-bottom:
        1px solid
        var(--dm-product-border);

    font-size: .96rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;

}


.dm-product-detail-ecosystem-links a:hover,
.dm-product-detail-ecosystem-links a:focus-visible {

    padding-left: 8px;

    color:
        var(--dm-product-green);

}


.dm-product-detail-ecosystem-links strong {

    color:
        var(--dm-product-green);

    font-size: 1.1rem;

}


/* ============================================================
   FAQ
   ============================================================ */

.dm-product-detail-faq {

    padding:
        96px 0;

    background:
        var(--dm-product-white);

}


.dm-product-detail-faq
.dm-product-detail-section-heading {

    grid-template-columns: 1fr;

}


.dm-product-detail-faq-list {

    max-width: 860px;

    margin:
        0 auto;

    border-top:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-faq-list details {

    border-bottom:
        1px solid
        var(--dm-product-border);

}


.dm-product-detail-faq-list summary {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 26px;

    padding:
        22px 42px
        22px 0;

    color:
        var(--dm-product-text);

    font-size:
        clamp(
            .98rem,
            1.3vw,
            1.08rem
        );

    font-weight: 600;

    line-height: 1.45;

    cursor: pointer;

    list-style: none;

}


.dm-product-detail-faq-list
summary::-webkit-details-marker {

    display: none;

}


.dm-product-detail-faq-list summary::after {

    content: "+";

    position: absolute;

    top: 50%;

    right: 2px;

    transform:
        translateY(-50%);

    color:
        var(--dm-product-green);

    font-size: 1.45rem;

    font-weight: 400;

    line-height: 1;

}


.dm-product-detail-faq-list
details[open] summary::after {

    content: "−";

}


.dm-product-detail-faq-list details p {

    max-width: 740px;

    margin: 0;

    padding:
        0 42px 24px 0;

    color:
        var(--dm-product-text-secondary);

    font-size: .94rem;

    line-height: 1.75;

}


/* ============================================================
   FINAL CTA
   ============================================================ */

.dm-product-detail-cta {

    padding:
        0 0 96px;

    background:
        var(--dm-product-white);

}


.dm-product-detail-cta-card {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    gap:
        clamp(
            36px,
            6vw,
            80px
        );

    align-items: end;

    padding:
        clamp(
            42px,
            5vw,
            64px
        );

    overflow: hidden;

    color:
        var(--dm-product-white);

    background:
        linear-gradient(
            135deg,
            var(--dm-product-green-dark),
            var(--dm-product-green-deep)
        );

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--dm-product-shadow);

}


.dm-product-detail-cta-card h2 {

    max-width: 700px;

    margin:
        0 0 16px;

    color:
        var(--dm-product-white);

    font-size:
        var(--dm-product-feature-heading);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -.025em;

    text-wrap: pretty;

    overflow-wrap: normal;

    word-break: normal;

}


.dm-product-detail-cta-card p {

    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, .76);

    font-size: .96rem;

    line-height: 1.75;

}


/* ============================================================
   CTA ACTIONS
   ============================================================ */

.dm-product-detail-cta-actions {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    min-width: 200px;

}


.dm-product-detail-cta-primary,
.dm-product-detail-cta-secondary {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        13px 18px;

    border-radius:
        var(--radius-md);

    font-size: .86rem;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.dm-product-detail-cta-primary {

    color:
        var(--dm-product-white);

    background:
        var(--dm-product-green);

    border:
        1px solid
        var(--dm-product-green);

}


.dm-product-detail-cta-primary:hover,
.dm-product-detail-cta-primary:focus-visible {

    background:
        var(--dm-product-green-hover);

    border-color:
        var(--dm-product-green-hover);

    transform:
        translateY(-2px);

}


.dm-product-detail-cta-secondary {

    color:
        var(--dm-product-white);

    background:
        transparent;

    border:
        1px solid
        rgba(255, 255, 255, .28);

}


.dm-product-detail-cta-secondary:hover,
.dm-product-detail-cta-secondary:focus-visible {

    background:
        rgba(255, 255, 255, .08);

    border-color:
        rgba(255, 255, 255, .60);

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.dm-product-detail-primary-button:focus-visible,
.dm-product-detail-secondary-button:focus-visible,
.dm-product-detail-breadcrumb a:focus-visible,
.dm-product-detail-ecosystem-links a:focus-visible,
.dm-product-detail-cta-primary:focus-visible,
.dm-product-detail-cta-secondary:focus-visible,
.dm-product-detail-faq-list summary:focus-visible {

    outline:
        3px solid
        rgba(34, 197, 94, .55);

    outline-offset: 4px;

}


/* ============================================================
   LARGE DESKTOP
   <= 1200PX
   ============================================================ */

@media (max-width: 1200px) {

    .dm-product-detail-lifecycle-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        border-bottom: 0;

    }


    .dm-product-detail-lifecycle-card {

        border-bottom:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-lifecycle-card:nth-child(4n) {

        border-right: 0;

    }


    .dm-product-detail-lifecycle-card:last-child {

        border-right:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-process-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .dm-product-detail-process-grid article {

        border-bottom:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-process-grid article:nth-child(3n) {

        border-right: 0;

    }


    .dm-product-detail-process-grid article:last-child {

        border-right:
            1px solid
            var(--dm-product-border);

    }

}


/* ============================================================
   DESKTOP / TABLET
   <= 1024PX
   ============================================================ */

@media (max-width: 1024px) {

    :root {

        --dm-product-hero-heading:
            clamp(
                2.25rem,
                4vw,
                2.85rem
            );

        --dm-product-section-heading:
            clamp(
                1.7rem,
                3vw,
                2.15rem
            );

        --dm-product-feature-heading:
            clamp(
                1.85rem,
                3.3vw,
                2.35rem
            );

    }


    .dm-product-detail-hero,
    .dm-product-detail-hero-container {

        min-height: 600px;

    }


    .dm-product-detail-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(6, 42, 22, .94) 0%,
                rgba(6, 42, 22, .80) 60%,
                rgba(10, 61, 32, .46) 100%
            );

    }


    .dm-product-detail-capability-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dm-product-detail-audience-grid {

        gap: 16px;

    }


    .dm-product-detail-audience-card {

        padding: 27px;

    }

}


/* ============================================================
   TABLET
   <= 900PX
   ============================================================ */

@media (max-width: 900px) {

    .dm-product-detail-intro,
    .dm-product-detail-audience,
    .dm-product-detail-lifecycle,
    .dm-product-detail-capabilities,
    .dm-product-detail-experience,
    .dm-product-detail-admin,
    .dm-product-detail-verification,
    .dm-product-detail-benefits,
    .dm-product-detail-process,
    .dm-product-detail-ecosystem,
    .dm-product-detail-faq {

        padding:
            80px 0;

    }


    .dm-product-detail-statement {

        padding-bottom: 80px;

    }


    .dm-product-detail-cta {

        padding-bottom: 80px;

    }


    .dm-product-detail-intro-grid,
    .dm-product-detail-section-heading,
    .dm-product-detail-verification-card,
    .dm-product-detail-ecosystem-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .dm-product-detail-section-heading {

        align-items: start;

    }


    .dm-product-detail-section-heading > p {

        justify-self: start;

        max-width: 620px;

    }


    .dm-product-detail-statement-grid {

        grid-template-columns: 1fr;

        min-height: 0;

    }


    .dm-product-detail-statement-media {

        min-height: 440px;

    }


    .dm-product-detail-audience-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dm-product-detail-experience-grid,
    .dm-product-detail-admin-grid {

        grid-template-columns: 1fr;

        gap: 42px;

    }


    .dm-product-detail-experience-media,
    .dm-product-detail-experience-media img,
    .dm-product-detail-admin-media,
    .dm-product-detail-admin-media img {

        min-height: 470px;

    }


    .dm-product-detail-admin-media {

        order: 2;

    }


    .dm-product-detail-admin-content {

        order: 1;

    }


    .dm-product-detail-cta-card {

        grid-template-columns: 1fr;

        align-items: start;

    }


    .dm-product-detail-cta-actions {

        flex-direction: row;

        flex-wrap: wrap;

        min-width: 0;

    }

}


/* ============================================================
   MOBILE
   <= 768PX
   ============================================================ */

@media (max-width: 768px) {

    :root {

        --dm-product-hero-heading:
            clamp(
                2rem,
                6vw,
                2.6rem
            );

        --dm-product-section-heading:
            clamp(
                1.65rem,
                5vw,
                2.05rem
            );

        --dm-product-feature-heading:
            clamp(
                1.8rem,
                5.5vw,
                2.2rem
            );

    }


    .dm-product-detail-hero {

        min-height: 600px;

    }


    .dm-product-detail-hero-container {

        min-height: 600px;

        padding-top: 110px;

        padding-bottom: 60px;

    }


    .dm-product-detail-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(6, 42, 22, .76) 0%,
                rgba(6, 42, 22, .90) 54%,
                rgba(6, 42, 22, .97) 100%
            );

    }


    .dm-product-detail-breadcrumb {

        top: 32px;

    }


    .dm-product-detail-hero h1 {

        line-height: 1.12;

        letter-spacing: -.02em;

    }


    .dm-product-detail-hero-lead {

        font-size: .98rem;

        line-height: 1.65;

    }


    .dm-product-detail-hero-actions {

        align-items: stretch;

    }


    .dm-product-detail-primary-button,
    .dm-product-detail-secondary-button {

        flex:
            1 1 180px;

    }


    .dm-product-detail-intro,
    .dm-product-detail-audience,
    .dm-product-detail-lifecycle,
    .dm-product-detail-capabilities,
    .dm-product-detail-experience,
    .dm-product-detail-admin,
    .dm-product-detail-verification,
    .dm-product-detail-benefits,
    .dm-product-detail-process,
    .dm-product-detail-ecosystem,
    .dm-product-detail-faq {

        padding:
            68px 0;

    }


    .dm-product-detail-statement {

        padding-bottom: 68px;

    }


    .dm-product-detail-cta {

        padding-bottom: 68px;

    }


    .dm-product-detail-statement-media {

        min-height: 360px;

    }


    .dm-product-detail-statement-content {

        padding:
            34px 26px;

    }


    .dm-product-detail-audience-grid {

        grid-template-columns: 1fr;

    }


    .dm-product-detail-audience-card {

        min-height: 240px;

    }


    .dm-product-detail-lifecycle-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dm-product-detail-lifecycle-card {

        min-height: 240px;

    }


    .dm-product-detail-lifecycle-card:nth-child(4n) {

        border-right:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-lifecycle-card:nth-child(2n) {

        border-right: 0;

    }


    .dm-product-detail-lifecycle-card:last-child {

        border-right:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-lifecycle-card > span {

        margin-bottom: 44px;

    }


    .dm-product-detail-feature,
    .dm-product-detail-feature-container {

        min-height: 560px;

    }


    .dm-product-detail-feature-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(6, 42, 22, .45) 0%,
                rgba(6, 42, 22, .93) 100%
            );

    }


    .dm-product-detail-feature-card {

        margin:
            60px 0;

        padding:
            34px 26px;

    }


    .dm-product-detail-capability-grid {

        grid-template-columns: 1fr;

    }


    .dm-product-detail-capability-card {

        min-height: 240px;

    }


    .dm-product-detail-experience-media,
    .dm-product-detail-experience-media img,
    .dm-product-detail-admin-media,
    .dm-product-detail-admin-media img {

        min-height: 390px;

    }


    .dm-product-detail-benefit-grid article {

        grid-template-columns:
            48px 1fr;

        gap: 16px;

        padding:
            24px 0;

    }


    .dm-product-detail-process-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .dm-product-detail-process-grid article:nth-child(3n) {

        border-right:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-process-grid article:nth-child(2n) {

        border-right: 0;

    }


    .dm-product-detail-process-grid article:last-child {

        border-right:
            1px solid
            var(--dm-product-border);

    }


    .dm-product-detail-process-grid article > span {

        margin-bottom: 48px;

    }


    .dm-product-detail-cta-card {

        padding:
            38px 26px;

    }

}


/* ============================================================
   SMALL MOBILE
   <= 576PX
   ============================================================ */

@media (max-width: 576px) {

    :root {

        --dm-product-hero-heading:
            clamp(
                1.9rem,
                7vw,
                2.35rem
            );

        --dm-product-section-heading:
            clamp(
                1.55rem,
                5.8vw,
                1.9rem
            );

        --dm-product-feature-heading:
            clamp(
                1.7rem,
                6.2vw,
                2.05rem
            );

    }


    .dm-product-detail-hero {

        min-height: 570px;

    }


    .dm-product-detail-hero-container {

        min-height: 570px;

        padding-top: 105px;

        padding-bottom: 52px;

    }


    .dm-product-detail-breadcrumb {

        top: 26px;

        gap: 7px;

        font-size: .68rem;

    }


    .dm-product-detail-hero h1 {

        margin-bottom: 18px;

        line-height: 1.13;

        letter-spacing: -.018em;

    }


    .dm-product-detail-hero-actions {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 26px;

    }


    .dm-product-detail-primary-button,
    .dm-product-detail-secondary-button {

        flex: 0 0 auto;

        min-height: 46px;

        padding:
            12px 17px;

    }


    .dm-product-detail-section-heading {

        margin-bottom: 34px;

    }


    .dm-product-detail-statement-media {

        min-height: 300px;

    }


    .dm-product-detail-audience-card {

        min-height: 220px;

        padding: 24px;

    }


    .dm-product-detail-lifecycle-grid {

        grid-template-columns: 1fr;

    }


    .dm-product-detail-lifecycle-card {

        min-height: 0;

        padding:
            24px 4px;

        border-right:
            0 !important;

    }


    .dm-product-detail-lifecycle-card > span {

        margin-bottom: 26px;

    }


    .dm-product-detail-feature,
    .dm-product-detail-feature-container {

        min-height: 520px;

    }


    .dm-product-detail-feature-card {

        margin:
            46px 0;

        padding:
            30px 22px;

    }


    .dm-product-detail-capability-card {

        min-height: 220px;

        padding: 24px;

    }


    .dm-product-detail-experience-media,
    .dm-product-detail-experience-media img,
    .dm-product-detail-admin-media,
    .dm-product-detail-admin-media img {

        min-height: 320px;

    }


    .dm-product-detail-verification-message {

        padding:
            26px 22px;

    }


    .dm-product-detail-benefit-grid article {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .dm-product-detail-process-grid {

        grid-template-columns: 1fr;

    }


    .dm-product-detail-process-grid article {

        min-height: 0;

        padding: 25px;

        border-right:
            0 !important;

    }


    .dm-product-detail-process-grid article > span {

        margin-bottom: 32px;

    }


    .dm-product-detail-ecosystem-links a {

        min-height: 66px;

        font-size: .9rem;

    }


    .dm-product-detail-faq-list summary {

        padding:
            21px 38px
            21px 0;

    }


    .dm-product-detail-faq-list details p {

        padding:
            0 32px 22px 0;

    }


    .dm-product-detail-cta-card {

        padding:
            32px 22px;

    }


    .dm-product-detail-cta-actions {

        flex-direction: column;

        align-items: flex-start;

    }


    .dm-product-detail-cta-primary,
    .dm-product-detail-cta-secondary {

        min-height: 46px;

        padding:
            12px 17px;

    }

}


/* ============================================================
   EXTRA SMALL MOBILE
   <= 375PX
   ============================================================ */

@media (max-width: 375px) {

    :root {

        --dm-product-hero-heading:
            2rem;

        --dm-product-section-heading:
            1.65rem;

        --dm-product-feature-heading:
            1.8rem;

    }


    .dm-product-detail-statement-content {

        padding:
            28px 20px;

    }


    .dm-product-detail-audience-card,
    .dm-product-detail-capability-card {

        padding: 21px;

    }


    .dm-product-detail-feature-card {

        padding:
            27px 20px;

    }


    .dm-product-detail-cta-card {

        padding:
            28px 20px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .dm-product-detail-primary-button,
    .dm-product-detail-secondary-button,
    .dm-product-detail-statement-media img,
    .dm-product-detail-audience-card,
    .dm-product-detail-lifecycle-card,
    .dm-product-detail-capability-card,
    .dm-product-detail-process-grid article,
    .dm-product-detail-ecosystem-links a,
    .dm-product-detail-cta-primary,
    .dm-product-detail-cta-secondary,
    .dm-product-detail-breadcrumb a {

        transition: none;

    }


    .dm-product-detail-primary-button:hover,
    .dm-product-detail-secondary-button:hover,
    .dm-product-detail-audience-card:hover,
    .dm-product-detail-capability-card:hover,
    .dm-product-detail-cta-primary:hover {

        transform: none;

    }


    .dm-product-detail-statement-grid:hover
    .dm-product-detail-statement-media img {

        transform: none;

    }

}