/* =========================================================
   ADMITH LEGACY LTD
   DOCUMENTATION & SOLUTIONS
   DEDICATED PAGE STYLESHEET
========================================================= */


/* =========================================================
   01. PAGE ROOT
========================================================= */

.documentation-page {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(91, 183, 128, 0.07),
            transparent 28%
        ),
        var(--color-white, #ffffff);

    color:
        var(--color-black, #000000);

}


/* =========================================================
   02. DOCUMENTATION HERO
========================================================= */

.documentation-hero {

    position: relative;

    min-height: min(880px, 100vh);

    display: flex;

    align-items: center;

    padding:
        clamp(150px, 14vw, 210px)
        0
        clamp(100px, 10vw, 160px);

    isolation: isolate;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbf9 52%,
            #f2f8f4 100%
        );

}


/* =====================================
   HERO GRID
===================================== */

.documentation-hero-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.55;

    background-image:

        linear-gradient(
            rgba(56, 56, 56, 0.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(56, 56, 56, 0.045) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, 0.7) 55%,
            transparent 100%
        );

}


/* =====================================
   HERO GLOW
===================================== */

.documentation-hero-glow {

    position: absolute;

    width: 620px;

    height: 620px;

    right: -180px;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: -2;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(91, 183, 128, 0.13) 0%,
            rgba(91, 183, 128, 0.05) 38%,
            transparent 70%
        );

    filter:
        blur(15px);

}


/* =====================================
   HERO CONTAINER
===================================== */

.documentation-hero
.container {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    align-items: center;

    gap:
        clamp(60px, 8vw, 130px);

}


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

.documentation-hero-content {

    max-width: 760px;

}


.documentation-hero-content
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color:
        var(--color-green, #5bb780);

    font-size:
        0.78rem;

    font-weight: 700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.documentation-hero-content
.section-label::before {

    content: "";

    width: 34px;

    height: 1px;

    background:
        currentColor;

}


.documentation-hero h1 {

    max-width: 780px;

    margin: 0;

    font-size:
        clamp(3.5rem, 7vw, 7.2rem);

    line-height:
        0.96;

    letter-spacing:
        -0.065em;

    font-weight:
        700;

}


.documentation-hero h1 span {

    display: block;

    color:
        var(--color-green, #5bb780);

}


.documentation-hero-content > p {

    max-width: 650px;

    margin:
        38px 0 0;

    color:
        var(--color-dark-gray, #383838);

    font-size:
        clamp(1rem, 1.3vw, 1.18rem);

    line-height:
        1.85;

}


.documentation-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 42px;

}


/* =========================================================
   03. HERO DOCUMENT VISUAL
========================================================= */

.documentation-hero-visual {

    position: relative;

    min-height: 590px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.document-stack {

    position: relative;

    width: min(100%, 500px);

    height: 500px;

    perspective:
        1200px;

}


/* =====================================
   DOCUMENT SHEETS
===================================== */

.document-sheet {

    position: absolute;

    width: 330px;

    height: 420px;

    left: 50%;

    top: 50%;

    border:
        1px solid
        rgba(56, 56, 56, 0.12);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.08);

    transform-style:
        preserve-3d;

}


.document-back {

    transform:
        translate(-50%, -50%)
        rotate(-12deg)
        translateZ(-100px);

    opacity:
        0.55;

}


.document-middle {

    transform:
        translate(-50%, -50%)
        rotate(7deg)
        translateZ(-40px);

    opacity:
        0.75;

}


.document-front {

    padding:
        34px;

    transform:
        translate(-50%, -50%)
        rotate(-2deg)
        translateZ(20px);

    box-shadow:
        0 40px 90px
        rgba(0, 0, 0, 0.13);

    animation:
        document-float
        7s
        ease-in-out
        infinite;

}


@keyframes document-float {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            rotate(-2deg)
            translateY(0)
            translateZ(20px);

    }

    50% {

        transform:
            translate(-50%, -50%)
            rotate(-1deg)
            translateY(-12px)
            translateZ(20px);

    }

}


/* =====================================
   DOCUMENT FRONT
===================================== */

.document-sheet-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 48px;

}


.document-status {

    padding:
        6px 10px;

    border-radius:
        4px;

    background:
        rgba(91, 183, 128, 0.1);

    color:
        #3d9164;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.document-number {

    color:
        rgba(56, 56, 56, 0.35);

    font-size:
        0.7rem;

    font-weight:
        600;

}


.document-title-line {

    width: 80%;

    height: 12px;

    margin-bottom: 10px;

    border-radius:
        20px;

    background:
        #383838;

}


.document-title-line.medium {

    width: 55%;

    height: 8px;

    margin-bottom: 48px;

    background:
        rgba(56, 56, 56, 0.2);

}


.document-content-lines {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.document-content-lines span {

    display: block;

    width: 100%;

    height: 5px;

    border-radius:
        20px;

    background:
        rgba(56, 56, 56, 0.11);

}


.document-content-lines span:nth-child(2) {

    width: 88%;

}


.document-content-lines span:nth-child(3) {

    width: 94%;

}


.document-content-lines span:nth-child(4) {

    width: 70%;

}


.document-footer-line {

    width: 38%;

    height: 4px;

    margin-top: 100px;

    border-radius:
        20px;

    background:
        var(--color-green, #5bb780);

}


/* =========================================================
   04. HERO ORBITS
========================================================= */

.documentation-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    border:
        1px solid
        rgba(91, 183, 128, 0.18);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

}


.orbit-one {

    width: 420px;

    height: 420px;

    animation:
        orbit-rotate
        24s
        linear
        infinite;

}


.orbit-two {

    width: 540px;

    height: 540px;

    border-color:
        rgba(56, 56, 56, 0.08);

    animation:
        orbit-rotate-reverse
        35s
        linear
        infinite;

}


@keyframes orbit-rotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes orbit-rotate-reverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


/* =====================================
   HERO NODES
===================================== */

.document-node {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 76px;

    height: 32px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(91, 183, 128, 0.25);

    border-radius:
        50px;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.06);

    color:
        #383838;

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    z-index:
        5;

}


.node-one {

    top: 11%;

    right: 5%;

}


.node-two {

    bottom: 18%;

    left: 4%;

}


.node-three {

    right: -4%;

    bottom: 34%;

}


/* =========================================================
   05. INTRODUCTION
========================================================= */

.documentation-introduction {

    position: relative;

    padding:
        clamp(110px, 12vw, 180px)
        0;

    background:
        #ffffff;

}


.documentation-intro-grid {

    display: grid;

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

    gap:
        clamp(60px, 10vw, 160px);

    align-items:
        start;

}


.documentation-intro-heading
.section-label {

    display: block;

    margin-bottom:
        24px;

    color:
        var(--color-green, #5bb780);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.documentation-intro-heading h2 {

    max-width:
        650px;

    margin:
        0;

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    line-height:
        1.02;

    letter-spacing:
        -0.055em;

}


.documentation-intro-content {

    padding-top:
        55px;

}


.documentation-intro-content p {

    max-width:
        620px;

    margin:
        0 0 26px;

    color:
        #5a5a5a;

    font-size:
        1.05rem;

    line-height:
        1.9;

}


.documentation-intro-content p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   06. CAPABILITIES
========================================================= */

.documentation-capabilities {

    position: relative;

    padding:
        clamp(110px, 12vw, 180px)
        0;

    background:
        #f7faf8;

    overflow:
        hidden;

}


.documentation-capabilities::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -250px;

    right: -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(91, 183, 128, 0.1),
            transparent 70%
        );

    pointer-events:
        none;

}


.documentation-section-heading {

    max-width:
        760px;

    margin-bottom:
        70px;

}


.documentation-section-heading
.section-label {

    display: inline-block;

    margin-bottom:
        22px;

    color:
        var(--color-green, #5bb780);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.documentation-section-heading h2 {

    margin:
        0;

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    line-height:
        1.02;

    letter-spacing:
        -0.055em;

}


.documentation-section-heading p {

    max-width:
        620px;

    margin:
        28px 0 0;

    color:
        #616161;

    line-height:
        1.85;

}


/* =====================================
   CAPABILITY GRID
===================================== */

.documentation-capability-grid {

    display:
        grid;

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

    gap:
        18px;

}


.documentation-capability-card {

    position:
        relative;

    min-height:
        360px;

    padding:
        38px;

    border:
        1px solid
        rgba(56, 56, 56, 0.09);

    background:
        rgba(255, 255, 255, 0.78);

    overflow:
        hidden;

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

}


.documentation-capability-card::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -90px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        rgba(91, 183, 128, 0.08);

    transition:
        transform 0.5s ease;

}


.documentation-capability-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(91, 183, 128, 0.35);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.07);

}


.documentation-capability-card:hover::after {

    transform:
        scale(1.6);

}


.capability-number {

    position:
        absolute;

    top:
        30px;

    right:
        32px;

    color:
        rgba(56, 56, 56, 0.2);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

}


.capability-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        70px;

    border:
        1px solid
        rgba(91, 183, 128, 0.3);

    border-radius:
        50%;

    color:
        var(--color-green, #5bb780);

}


.capability-icon svg {

    width:
        22px;

    height:
        22px;

}


.documentation-capability-card h3 {

    margin:
        0 0 14px;

    font-size:
        1.3rem;

    letter-spacing:
        -0.025em;

}


.documentation-capability-card p {

    max-width:
        400px;

    margin:
        0;

    color:
        #666666;

    font-size:
        0.92rem;

    line-height:
        1.75;

}


/* =========================================================
   07. DOCUMENTATION ECOSYSTEM
========================================================= */

.documentation-ecosystem {

    position:
        relative;

    padding:
        clamp(120px, 14vw, 200px)
        0;

    background:
        #ffffff;

}


.documentation-ecosystem-grid {

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(70px, 10vw, 150px);

}


/* =====================================
   ECOSYSTEM VISUAL
===================================== */

.ecosystem-visual {

    position:
        relative;

    width:
        min(100%, 600px);

    aspect-ratio:
        1 / 1;

    margin:
        0 auto;

}


.ecosystem-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        130px;

    height:
        130px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(91, 183, 128, 0.5);

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.1);

    color:
        #383838;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    z-index:
        5;

}


.ecosystem-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(91, 183, 128, 0.18);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

}


.ecosystem-ring span {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        86px;

    height:
        30px;

    border:
        1px solid
        rgba(91, 183, 128, 0.25);

    border-radius:
        50px;

    background:
        #ffffff;

    color:
        #383838;

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

}


.ring-one {

    width:
        280px;

    height:
        280px;

}


.ring-one span {

    top:
        -15px;

    left:
        50%;

    transform:
        translateX(-50%);

}


.ring-two {

    width:
        420px;

    height:
        420px;

}


.ring-two span {

    right:
        -43px;

    top:
        50%;

    transform:
        translateY(-50%);

}


.ring-three {

    width:
        550px;

    height:
        550px;

}


.ring-three span {

    bottom:
        -15px;

    left:
        50%;

    transform:
        translateX(-50%);

}


/* =====================================
   CONNECTIONS
===================================== */

.ecosystem-connection {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        1px;

    height:
        275px;

    transform-origin:
        top center;

    background:
        linear-gradient(
            to bottom,
            rgba(91, 183, 128, 0.45),
            transparent
        );

}


.connection-one {

    transform:
        translate(-50%, 0)
        rotate(0deg);

}


.connection-two {

    transform:
        translate(-50%, 0)
        rotate(120deg);

}


.connection-three {

    transform:
        translate(-50%, 0)
        rotate(240deg);

}


/* =====================================
   ECOSYSTEM CONTENT
===================================== */

.ecosystem-content
.section-label {

    display:
        inline-block;

    margin-bottom:
        24px;

    color:
        var(--color-green, #5bb780);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.ecosystem-content h2 {

    max-width:
        650px;

    margin:
        0;

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    line-height:
        1.03;

    letter-spacing:
        -0.055em;

}


.ecosystem-content p {

    max-width:
        580px;

    margin:
        28px 0 0;

    color:
        #616161;

    line-height:
        1.85;

}


.ecosystem-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin:
        38px 0 0;

    padding:
        0;

    list-style:
        none;

}


.ecosystem-list li {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #383838;

    font-size:
        0.94rem;

}


.ecosystem-check {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(91, 183, 128, 0.12);

    color:
        #4da773;

    font-size:
        0.7rem;

    font-weight:
        700;

}


/* =========================================================
   DOCUMENTATION PROCESS — FIXED
========================================================= */

.documentation-process {
    position: relative;
    padding: clamp(110px, 12vw, 180px) 0;
    background: #f7faf8;
}

.documentation-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.documentation-process-card {
    position: relative;
    min-height: 330px;
    padding: 36px 30px;
    border-top: 1px solid rgba(56, 56, 56, 0.15);
}

.documentation-process-card .process-number {
    position: relative;
    display: block;

    margin: 0 0 48px;

    color: var(--color-green, #5bb780);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.12em;
}

.documentation-process-card h3 {
    position: relative;

    margin: 0 0 18px;

    color: var(--color-black, #000000);

    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.documentation-process-card p {
    position: relative;

    max-width: 280px;

    margin: 0;

    color: #666666;

    font-size: 0.9rem;
    line-height: 1.8;
}

.process-line {
    position: absolute;

    top: 52px;
    left: 65px;

    width: calc(100% - 65px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(91, 183, 128, 0.45),
            transparent
        );
}

/* =========================================================
   09. AUDIENCE
========================================================= */

.documentation-audience {

    padding:
        clamp(110px, 12vw, 180px)
        0;

    background:
        #ffffff;

}


.documentation-audience-grid {

    display:
        grid;

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

    gap:
        clamp(60px, 10vw, 140px);

}


.documentation-audience-heading
.section-label {

    display:
        block;

    margin-bottom:
        24px;

    color:
        var(--color-green, #5bb780);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.documentation-audience-heading h2 {

    margin:
        0;

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height:
        1.04;

    letter-spacing:
        -0.05em;

}


.documentation-audience-cards {

    display:
        grid;

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

    gap:
        14px;

}


.audience-card {

    min-height:
        220px;

    padding:
        32px;

    border:
        1px solid
        rgba(56, 56, 56, 0.1);

    background:
        #fafafa;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;

}


.audience-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(91, 183, 128, 0.35);

    background:
        #ffffff;

}


.audience-card span {

    display:
        block;

    margin-bottom:
        20px;

    color:
        #383838;

    font-size:
        1.15rem;

    font-weight:
        600;

}


.audience-card p {

    margin:
        0;

    color:
        #6b6b6b;

    font-size:
        0.9rem;

    line-height:
        1.75;

}


/* =========================================================
   10. FINAL CTA
========================================================= */

.documentation-cta {

    position:
        relative;

    padding:
        clamp(120px, 14vw, 210px)
        0;

    overflow:
        hidden;

    background:
        #111111;

    color:
        #ffffff;

    isolation:
        isolate;

}


.documentation-cta-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        0.25;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

}


.documentation-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(91, 183, 128, 0.16),
            transparent 68%
        );

    filter:
        blur(10px);

    z-index:
        -1;

}


.documentation-cta-inner {

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}


.documentation-cta-inner
.section-label {

    display:
        inline-block;

    margin-bottom:
        28px;

    color:
        #72c993;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.documentation-cta h2 {

    margin:
        0;

    font-size:
        clamp(3rem, 7vw, 7rem);

    line-height:
        0.98;

    letter-spacing:
        -0.06em;

}


.documentation-cta p {

    max-width:
        600px;

    margin:
        30px auto 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        1rem;

    line-height:
        1.8;

}


.documentation-cta
.btn {

    margin-top:
        40px;

}


.documentation-cta
.btn-primary {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

}


.documentation-cta
.btn-primary span {

    transition:
        transform 0.3s ease;

}


.documentation-cta
.btn-primary:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   DOCUMENTATION CTA — DARK MODE TEXT FIX
========================================================= */

.documentation-cta {
    color: #ffffff;
}

.documentation-cta-inner .section-label {
    color: #72c993;
}

.documentation-cta-inner h2 {
    color: #ffffff;
}

.documentation-cta-inner p {
    color: rgba(255, 255, 255, 0.68);
}

.documentation-cta-inner .btn-primary {
    color: #ffffff;
}




/* =========================================================
   11. RESPONSIVE — LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {


.documentation-hero
.container {

    grid-template-columns:
        1fr;

}


.documentation-hero-content {

    max-width:
        800px;

}


.documentation-hero-visual {

    min-height:
        500px;

    max-width:
        650px;

    margin:
        0 auto;

}


.documentation-capability-grid {

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

}


.documentation-process-grid {

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

}


.documentation-process-card {

    min-height:
        280px;

}


.process-line {

    display:
        none;

}


.documentation-ecosystem-grid {

    grid-template-columns:
        1fr;

}


.ecosystem-visual {

    order:
        2;

}


.ecosystem-content {

    order:
        1;

}


.documentation-audience-grid {

    grid-template-columns:
        1fr;

}

}


/* =========================================================
   12. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {


.documentation-hero {

    min-height:
        auto;

    padding:
        140px 0 90px;

}


.documentation-hero h1 {

    font-size:
        clamp(3rem, 12vw, 5rem);

}


.documentation-hero-content > p {

    font-size:
        0.98rem;

}


.documentation-hero-actions {

    align-items:
        stretch;

    flex-direction:
        column;

}


.documentation-hero-actions
.btn {

    width:
        100%;

    justify-content:
        center;

}


.documentation-hero-visual {

    min-height:
        430px;

}


.document-stack {

    transform:
        scale(0.8);

}


.documentation-intro-grid {

    grid-template-columns:
        1fr;

    gap:
        30px;

}


.documentation-intro-content {

    padding-top:
        0;

}


.documentation-capability-grid {

    grid-template-columns:
        1fr;

}


.documentation-capability-card {

    min-height:
        320px;

}


.documentation-ecosystem {

    overflow:
        hidden;

}


.ecosystem-visual {

    width:
        650px;

    max-width:
        none;

    margin-left:
        50%;

    transform:
        translateX(-50%);

}


.documentation-process-grid {

    grid-template-columns:
        1fr;

}


.documentation-process-card {

    min-height:
        auto;

    padding:
        30px 0 45px;

}


.process-number {

    margin-bottom:
        35px;

}


.documentation-audience-cards {

    grid-template-columns:
        1fr;

}


.audience-card {

    min-height:
        auto;

}


.documentation-cta {

    padding:
        110px 0;

}


.documentation-cta h2 {

    font-size:
        clamp(3rem, 13vw, 5rem);

}

}


/* =========================================================
   13. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 520px) {


.documentation-hero {

    padding:
        125px 0 70px;

}


.documentation-hero h1 {

    font-size:
        clamp(2.8rem, 15vw, 4rem);

}


.documentation-hero-content > p {

    line-height:
        1.75;

}


.documentation-hero-visual {

    min-height:
        360px;

}


.document-stack {

    transform:
        scale(0.62);

}


.documentation-orbit {

    display:
        none;

}


.document-node {

    display:
        none;

}


.documentation-introduction,
.documentation-capabilities,
.documentation-ecosystem,
.documentation-process,
.documentation-audience {

    padding:
        90px 0;

}


.documentation-section-heading {

    margin-bottom:
        50px;

}


.documentation-section-heading h2,
.documentation-intro-heading h2,
.ecosystem-content h2,
.documentation-audience-heading h2 {

    font-size:
        clamp(2.4rem, 11vw, 3.5rem);

}


.documentation-capability-card {

    min-height:
        300px;

    padding:
        30px;

}


.capability-icon {

    margin-bottom:
        55px;

}


.ecosystem-visual {

    width:
        500px;

    transform:
        translateX(-50%)
        scale(0.72);

    transform-origin:
        center center;

}


.documentation-audience-cards {

    gap:
        10px;

}


.documentation-cta {

    padding:
        95px 0;

}


.documentation-cta h2 {

    font-size:
        clamp(2.8rem, 14vw, 4rem);

}


.documentation-cta p {

    font-size:
        0.92rem;

}

}


/* =========================================================
   14. REDUCED MOTION
========================================================= */

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


.document-front,
.orbit-one,
.orbit-two {

    animation:
        none;

}


.documentation-capability-card,
.audience-card {

    transition:
        none;

}


.documentation-cta
.btn-primary span {

    transition:
        none;

}

}


/* =========================================================
   15. PRINT
========================================================= */

@media print {


.documentation-hero,
.documentation-cta {

    background:
        #ffffff;

    color:
        #000000;

}


.documentation-hero-grid,
.documentation-hero-glow,
.documentation-hero-visual,
.documentation-cta-grid {

    display:
        none;

}


.documentation-page {

    overflow:
        visible;

}

}