/* ==========================================================
   MYLO Product Documents
   Location:
   /telephony-small-business/sections/documents/documents.css

   Self-contained. No framework or JavaScript dependency.
   ========================================================== */

.mylo-documents {
    --md-ink: #17132c;
    --md-muted: #6f6a7d;
    --md-purple: #6840cd;
    --md-purple-deep: #4e2aae;
    --md-green: #20c879;
    --md-blue: #2e8df4;
    --md-line: #ebe7f3;
    --md-paper: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 36px 20px 40px;
    color: var(--md-ink);
    background:
        radial-gradient(circle at 7% 10%, rgba(104,64,205,.075), transparent 24%),
        radial-gradient(circle at 93% 88%, rgba(32,200,121,.065), transparent 22%),
        #faf9fd;
    border-top: 1px solid #f0edf6;
}

.mylo-documents *,
.mylo-documents *::before,
.mylo-documents *::after {
    box-sizing: border-box;
}

.mylo-documents__shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.mylo-documents__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 455px);
    align-items: end;
    gap: 34px;
    margin-bottom: 20px;
}

.mylo-documents__kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    color: var(--md-purple);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em;
}

.mylo-documents__kicker::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--md-purple), var(--md-green));
}

.mylo-documents h2,
.mylo-documents h3,
.mylo-documents p {
    margin-top: 0;
}

.mylo-documents h2 {
    max-width: 680px;
    margin-bottom: 0;
    font-size: clamp(25px, 2.5vw, 35px);
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--md-ink);
}

.mylo-documents__lead {
    margin-bottom: 1px;
    color: var(--md-muted);
    font-size: 14px;
    line-height: 1.55;
}

.mylo-documents__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mylo-document-card {
    position: relative;
    display: grid;
    grid-template-rows: 92px 1fr auto;
    min-width: 0;
    min-height: 268px;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--md-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(43,31,78,.06);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.mylo-document-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    opacity: .95;
}

.mylo-document-card--product::before {
    background: linear-gradient(90deg, var(--md-purple), #9c73ef);
}

.mylo-document-card--install::before {
    background: linear-gradient(90deg, var(--md-green), #6adfa8);
}

.mylo-document-card--access::before {
    background: linear-gradient(90deg, var(--md-blue), #70b9ff);
}

.mylo-document-card:hover {
    transform: translateY(-3px);
    border-color: #ddd6ee;
    box-shadow: 0 16px 38px rgba(43,31,78,.10);
}

.mylo-document-card__visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 14px 14px 0;
    border-radius: 15px;
}

.mylo-document-card--product .mylo-document-card__visual {
    background: linear-gradient(135deg, rgba(104,64,205,.09), rgba(104,64,205,.025));
}

.mylo-document-card--install .mylo-document-card__visual {
    background: linear-gradient(135deg, rgba(32,200,121,.10), rgba(32,200,121,.025));
}

.mylo-document-card--access .mylo-document-card__visual {
    background: linear-gradient(135deg, rgba(46,141,244,.10), rgba(46,141,244,.025));
}

.mylo-document-card__scene {
    width: min(220px, 78%);
    height: 82px;
    overflow: visible;
}

/* Product scene */
.doc-flow {
    fill: none;
    stroke: #9d88d6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 4 5;
    animation: md-flow 3.4s linear infinite;
}

.doc-flow--b { stroke: #5fa8f6; animation-delay: -.9s; }
.doc-flow--c { stroke: #50cc91; animation-delay: -1.7s; }

.doc-node {
    stroke: rgba(255,255,255,.95);
    stroke-width: 2;
}

.doc-node--phone { fill: #2dd57d; }
.doc-node--team { fill: #2f93f5; }
.doc-node--route { fill: #ff9f43; }

.doc-icon-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-mylo-box {
    transform-origin: 100px 50px;
    animation: md-box-breathe 3.8s ease-in-out infinite;
}

.doc-pulse {
    fill: none;
    stroke: #34db87;
    stroke-width: 1.5;
    transform-origin: center;
    animation: md-pulse 2.2s ease-out infinite;
}

/* Installation scene */
.doc-install-line {
    fill: none;
    stroke: #9e95b6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    animation: md-flow 2.8s linear infinite;
}

.doc-install-plug rect {
    fill: #6840cd;
}

.doc-install-plug path {
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.doc-install-box rect {
    fill: #1e1740;
}

.doc-install-box path {
    fill: none;
    stroke: #a996e6;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.doc-install-box circle {
    fill: #24d07c;
}

.doc-install-browser rect {
    fill: #eef8f3;
    stroke: #21b66e;
    stroke-width: 1.6;
}

.doc-install-browser path {
    fill: none;
    stroke: #21b66e;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.doc-install-dot {
    fill: #25ca78;
    animation: md-travel 2.6s ease-in-out infinite;
}

.doc-install-dot--2 {
    animation-delay: -1.3s;
}

.doc-install-check {
    fill: none;
    stroke: #20c879;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: md-check 3s ease-in-out infinite;
}

/* Access scene */
.doc-user {
    fill: #f3f8ff;
    stroke: #8fc5ff;
    stroke-width: 1.5;
}

.doc-user-head {
    fill: #2e8df4;
}

.doc-user-body {
    fill: none;
    stroke: #2e8df4;
    stroke-width: 2;
    stroke-linecap: round;
}

.doc-shield path:first-child {
    fill: #6840cd;
    filter: drop-shadow(0 5px 8px rgba(104,64,205,.18));
}

.doc-shield-check {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-access-line {
    fill: none;
    stroke: #82b9f2;
    stroke-width: 2;
    stroke-dasharray: 3 4;
    animation: md-flow 3s linear infinite;
}

.doc-access-pulse {
    fill: none;
    stroke: rgba(104,64,205,.25);
    stroke-width: 1.4;
    transform-origin: 90px 46px;
    animation: md-pulse 2.8s ease-out infinite;
}

.mylo-document-card__content {
    padding: 13px 17px 12px;
}

.mylo-document-card__label {
    display: block;
    margin-bottom: 5px;
    color: #8b849a;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .1em;
}

.mylo-document-card h3 {
    margin-bottom: 6px;
    color: var(--md-ink);
    font-size: 18px;
    line-height: 1.16;
    letter-spacing: -.015em;
}

.mylo-document-card__content p {
    margin-bottom: 0;
    color: var(--md-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.mylo-document-card__download {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 47px;
    margin: 0 14px 14px;
    padding: 8px 10px;
    color: #443667;
    background: #f8f6fc;
    border: 1px solid #ece8f4;
    border-radius: 12px;
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1;
    font-weight: 750;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.mylo-document-card__download:hover,
.mylo-document-card__download:focus-visible {
    color: #fff;
    background: var(--md-purple);
    border-color: var(--md-purple);
    text-decoration: none;
    outline: none;
}

.mylo-document-card--install .mylo-document-card__download:hover,
.mylo-document-card--install .mylo-document-card__download:focus-visible {
    background: #159d5c;
    border-color: #159d5c;
}

.mylo-document-card--access .mylo-document-card__download:hover,
.mylo-document-card--access .mylo-document-card__download:focus-visible {
    background: #247bd7;
    border-color: #247bd7;
}

.mylo-document-card__download:focus-visible {
    box-shadow: 0 0 0 3px rgba(104,64,205,.18);
}

.mylo-document-card__download-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    color: var(--md-purple);
    box-shadow: 0 2px 7px rgba(44,33,78,.08);
}

.mylo-document-card--install .mylo-document-card__download-icon {
    color: #159d5c;
}

.mylo-document-card--access .mylo-document-card__download-icon {
    color: #247bd7;
}

.mylo-document-card__download-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mylo-document-card__arrow {
    font-size: 17px;
    transition: transform .18s ease;
}

.mylo-document-card__download:hover .mylo-document-card__arrow {
    transform: translateX(3px);
}

/* Small, meaningful motion only */
@keyframes md-flow {
    to { stroke-dashoffset: -18; }
}

@keyframes md-box-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes md-pulse {
    0% { opacity: .7; transform: scale(.65); }
    75%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes md-travel {
    0%, 100% { opacity: .35; transform: translateX(-4px); }
    50% { opacity: 1; transform: translateX(4px); }
}

@keyframes md-check {
    0%, 35% { opacity: .45; }
    50%, 90% { opacity: 1; }
    100% { opacity: .45; }
}

/* Tablet / mobile becomes a compact document shelf, not squeezed desktop cards. */
@media (max-width: 820px) {
    .mylo-documents {
        padding: 30px 16px 32px;
    }

    .mylo-documents__intro {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 17px;
    }

    .mylo-documents__lead {
        max-width: 650px;
        font-size: 13px;
    }

    .mylo-documents__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mylo-document-card {
        grid-template-columns: 112px minmax(0, 1fr) 132px;
        grid-template-rows: 1fr;
        align-items: center;
        min-height: 126px;
    }

    .mylo-document-card__visual {
        width: 96px;
        height: 92px;
        margin: 0 0 0 14px;
    }

    .mylo-document-card__scene {
        width: 105px;
        height: 70px;
    }

    .mylo-document-card__content {
        padding: 15px 13px;
    }

    .mylo-document-card__download {
        grid-template-columns: 27px 1fr;
        gap: 7px;
        margin: 0 14px 0 0;
    }

    .mylo-document-card__arrow {
        display: none;
    }
}

@media (max-width: 580px) {
    .mylo-documents {
        padding: 25px 13px 27px;
    }

    .mylo-documents h2 {
        font-size: 25px;
    }

    .mylo-document-card {
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 0;
        border-radius: 16px;
    }

    .mylo-document-card__visual {
        width: 70px;
        height: 76px;
        margin: 12px 0 0 12px;
    }

    .mylo-document-card__scene {
        width: 86px;
        height: 62px;
    }

    .mylo-document-card__content {
        padding: 13px 12px 8px 4px;
    }

    .mylo-document-card h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .mylo-document-card__content p {
        font-size: 11.7px;
        line-height: 1.38;
    }

    .mylo-document-card__download {
        grid-column: 1 / -1;
        grid-template-columns: 28px 1fr auto;
        margin: 2px 12px 12px;
        min-height: 43px;
    }

    .mylo-document-card__arrow {
        display: inline;
    }
}

/* Respect the visitor's operating-system motion preference. */
@media (prefers-reduced-motion: reduce) {
    .mylo-documents *,
    .mylo-documents *::before,
    .mylo-documents *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}