/* QWERTYMAIL — SMTP и API */


.qapi-page a { color: inherit; }


/* Hero */
.qapi-hero { padding: 78px 0 60px; }

.qapi-hero__grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(360px,1fr);
    gap: 58px;
    align-items: center;
}

.qapi-hero__content,
.qapi-hero__visual { min-width: 0; }


.qapi-transport-card {
    padding: 18px;
    border: 1px solid #dddde7;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 62px rgba(33,33,52,.12);
}

.qapi-transport-card__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 16px;
    border-bottom: 1px solid #ececf0;
    color: #7f7f89;
    font-size: 10px;
    text-align: center;
}

.qapi-transport-card__top b { color: var(--qapi-accent); font-size: 11px; letter-spacing: .06em; }

.qapi-transport {
    display: grid;
    grid-template-columns: 1fr 64px .9fr 64px .72fr;
    gap: 8px;
    align-items: center;
    padding: 26px 0 22px;
}

.qapi-system-node,
.qapi-core-node,
.qapi-mail-node {
    min-height: 112px;
    border: 1px solid #e2e2e9;
    border-radius: 15px;
    background: #fbfbfd;
}

.qapi-system-node {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    align-content: center;
    padding: 12px;
}

.qapi-system-node span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #e7e7ee;
    border-radius: 8px;
    background: #fff;
    color: #50505b;
    font-size: 9px;
    font-weight: 800;
}

.qapi-core-node,
.qapi-mail-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.qapi-core-node {
    border-color: var(--qapi-accent);
    background: var(--qapi-accent);
    color: #fff;
}

.qapi-core-node strong { font-size: 18px; letter-spacing: .06em; }
.qapi-core-node span { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 10px; }
.qapi-mail-node strong { color: var(--qapi-accent); font-size: 28px; }
.qapi-mail-node span { margin-top: 4px; color: #6c6c76; font-size: 10px; }

.qapi-arrow {
    position: relative;
    height: 2px;
    background: #cfcfda;
}

.qapi-arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #bcbcca;
    border-right: 2px solid #bcbcca;
    transform: rotate(45deg);
}

.qapi-arrow small {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    color: #8a8a94;
    font-size: 8px;
    white-space: nowrap;
}

.qapi-feedback {
    position: relative;
    padding: 15px 14px 5px;
    border-top: 1px solid #ececf1;
}

.qapi-feedback__line {
    height: 2px;
    background: linear-gradient(90deg, transparent, #aaa9f0 20%, #aaa9f0 80%, transparent);
}

.qapi-feedback__label {
    margin-top: 9px;
    color: #6c6c77;
    font-size: 9px;
    text-align: center;
}

/* Proof */


/* Common */


/* Use cases */
.qapi-usecases { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

.qapi-usecase-card {
    min-height: 300px;
    padding: 27px;
    border: 1px solid var(--qapi-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(30,30,42,.045);
}

.qapi-usecase-card__num { color: var(--qapi-accent); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.qapi-usecase-card h3 { margin: 30px 0 0; font-size: 20px; line-height: 1.25; font-weight: 750; }
.qapi-usecase-card p { margin: 10px 0 0; color: var(--qapi-text); font-size: 14px; line-height: 1.65; }

.qapi-mini-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #ecece7;
}

.qapi-mini-flow span,
.qapi-mini-flow strong { font-size: 10px; line-height: 1.35; }
.qapi-mini-flow span { color: #7a7974; }
.qapi-mini-flow strong { color: var(--qapi-accent); text-align: right; }
.qapi-mini-flow i { color: #a2a19b; font-style: normal; }

/* Compare */
.qapi-compare-card {
    padding: 48px;
    border-radius: 24px;
    background: var(--qapi-dark);
    color: #fff;
}

.qapi-compare-card__head { max-width: 760px; }
.qapi-compare-card__head h2 { color: #fff; }
.qapi-compare-card__head p { color: #aaaab7; }

.qapi-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; }

.qapi-compare-option {
    padding: 30px;
    border: 1px solid #30303d;
    border-radius: 18px;
    background: #1d1d28;
}

.qapi-compare-option--accent { border-color: #4a48c6; background: #202034; }
.qapi-compare-option__label { color: #c9c8ff; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.qapi-compare-option h3 { margin: 20px 0 0; color: #fff; font-size: 23px; line-height: 1.25; }
.qapi-compare-option p { margin: 12px 0 0; color: #aaaab7; font-size: 14px; line-height: 1.65; }
.qapi-compare-option ul { margin: 22px 0 0; padding-left: 18px; color: #d6d6df; font-size: 13px; line-height: 1.8; }

/* Template */
.qapi-template-block {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.qapi-template-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 26px; }
.qapi-template-points div { padding: 16px; border: 1px solid var(--qapi-border); border-radius: 12px; background: #fff; }
.qapi-template-points b { display: block; color: var(--qapi-accent); font-size: 12px; }
.qapi-template-points span { display: block; margin-top: 8px; color: #555; font-size: 12px; line-height: 1.4; font-weight: 700; }

.qapi-text-link { display: inline-block; margin-top: 25px; color: var(--qapi-accent) !important; font-size: 14px; font-weight: 750; text-decoration: none !important; }

.qapi-code-card {
    overflow: hidden;
    border: 1px solid #2a2a35;
    border-radius: 20px;
    background: #171722;
    box-shadow: 0 22px 54px rgba(28,28,40,.13);
}

.qapi-code-card__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #2c2c38;
    background: #1c1c27;
}

.qapi-code-card__bar span { width: 8px; height: 8px; border-radius: 50%; background: #555563; }
.qapi-code-card__bar b { margin-left: auto; color: #888896; font-size: 10px; font-weight: 700; }
.qapi-code-card pre { margin: 0; padding: 30px; overflow: auto; }
.qapi-code-card code { color: #d4d4e1; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Statuses */
.qapi-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.qapi-status-card { padding: 23px; border: 1px solid var(--qapi-border); border-radius: 16px; background: #fff; }
.qapi-status-card > span { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--qapi-accent); }
.qapi-status-card h3 { margin: 18px 0 0; font-size: 17px; }
.qapi-status-card p { margin: 8px 0 0; color: var(--qapi-text); font-size: 13px; line-height: 1.58; }

/* Webhook */
.qapi-webhook-card {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
    padding: 46px;
    border-radius: 24px;
    background: var(--qapi-dark);
    color: #fff;
}

.qapi-webhook-card__content h2 { color: #fff; }
.qapi-webhook-card__content p { margin: 16px 0 0; color: #aaaab7; font-size: 16px; line-height: 1.7; }
.qapi-event-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.qapi-event-tags span { padding: 8px 10px; border: 1px solid #333340; border-radius: 8px; background: #20202b; color: #d4d4dc; font-size: 11px; }

.qapi-webhook-flow { display: grid; grid-template-columns: 1fr 36px 1.2fr 36px 1fr; gap: 8px; align-items: center; }
.qapi-webhook-flow__source,
.qapi-webhook-flow__target,
.qapi-webhook-flow__payload { min-height: 130px; border: 1px solid #343440; border-radius: 14px; background: #1f1f2a; }
.qapi-webhook-flow__source,
.qapi-webhook-flow__target { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.qapi-webhook-flow__payload { display: flex; flex-direction: column; justify-content: center; padding: 18px; }
.qapi-webhook-flow__payload small { color: #797989; font-size: 9px; }
.qapi-webhook-flow__payload strong { margin-top: 6px; color: #c8c7ff; font-size: 15px; }
.qapi-webhook-flow__payload span { margin-top: 8px; color: #8e8e9d; font-size: 10px; }
.qapi-webhook-flow__arrow { color: #6f6f7d; text-align: center; }

/* Connect */
.qapi-connect { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.qapi-connect article { padding: 28px; border: 1px solid var(--qapi-border); border-radius: 18px; background: #fff; }
.qapi-connect article > span { color: var(--qapi-accent); font-size: 12px; font-weight: 800; }
.qapi-connect h3 { margin: 28px 0 0; font-size: 20px; }
.qapi-connect p { margin: 10px 0 0; color: var(--qapi-text); font-size: 14px; line-height: 1.65; }

.qapi-security-note {
    display: grid;
    grid-template-columns: .3fr 1.7fr;
    gap: 30px;
    margin-top: 18px;
    padding: 24px 28px;
    border: 1px solid #dddde8;
    border-radius: 16px;
    background: #f0efff;
}
.qapi-security-note strong { color: var(--qapi-accent); font-size: 14px; }
.qapi-security-note p { margin: 0; color: #555467; font-size: 13px; line-height: 1.6; }

/* Next */
.qapi-next-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.qapi-next-card { display: block; min-height: 245px; padding: 28px; border: 1px solid var(--qapi-border); border-radius: 18px; background: #fff; text-decoration: none !important; }
.qapi-next-card > span { color: var(--qapi-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.qapi-next-card h3 { margin: 26px 0 0; font-size: 21px; }
.qapi-next-card p { margin: 10px 0 0; color: var(--qapi-text); font-size: 14px; line-height: 1.6; }
.qapi-next-card b { display: block; margin-top: 20px; color: var(--qapi-accent); font-size: 12px; }

/* FAQ */


/* Final */
.qapi-final { padding-top: 38px; }
.qapi-final__card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    padding: 42px;
    border: 1px solid var(--qapi-border);
    border-radius: 22px;
    background: #fff;
}
.qapi-final__card h2 { max-width: 700px; }
.qapi-final__card p { max-width: 680px; }

@media (max-width: 1060px) {
    .qapi-hero__grid,
    .qapi-template-block,
    .qapi-webhook-card { grid-template-columns: 1fr; }
    .qapi-hero__grid { gap: 44px; }
    .qapi-usecases { grid-template-columns: repeat(2,1fr); }
    .qapi-status-grid { grid-template-columns: repeat(2,1fr); }
    .qapi-webhook-flow { max-width: 680px; }
}

@media (max-width: 760px) {
    
    .qapi-hero { padding: 48px 0 40px; }
    
    
    
    
    
    .qapi-transport { grid-template-columns: 1fr; gap: 10px; }
    .qapi-arrow { width: 2px; height: 26px; margin: 0 auto; }
    .qapi-arrow::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); }
    .qapi-arrow small { left: 12px; top: 8px; transform: none; }
    .qapi-system-node { min-height: 90px; }
    .qapi-core-node, .qapi-mail-node { min-height: 90px; }
    
    
    
    
    .qapi-section-head h2,
    .qapi-template-block__content h2,
    .qapi-webhook-card__content h2,
    .qapi-final__card h2,
    .qapi-compare-card__head h2 { font-size: 34px; }
    .qapi-usecases,
    .qapi-compare-grid,
    .qapi-connect,
    .qapi-next-grid { grid-template-columns: 1fr; }
    .qapi-compare-card,
    .qapi-webhook-card { padding: 28px; }
    .qapi-template-points { grid-template-columns: 1fr; }
    .qapi-code-card pre { padding: 22px; }
    .qapi-code-card code { font-size: 11px; }
    .qapi-status-grid { grid-template-columns: 1fr; }
    .qapi-webhook-flow { grid-template-columns: 1fr; }
    .qapi-webhook-flow__arrow { transform: rotate(90deg); }
    .qapi-security-note { grid-template-columns: 1fr; gap: 10px; }
    .qapi-final__card { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 480px) {
    
    
    
    .qapi-transport-card { padding: 13px; }
    .qapi-system-node { grid-template-columns: 1fr 1fr 1fr; }
    .qapi-compare-card,
    .qapi-webhook-card { padding: 22px; }
}