/* Editions component: the free Mac App Store edition next to the website edition.
   Radius, card gap and both accents come from the component's Design parameters.
   Text rules carry !important because each host page (home, features, pricing,
   download) styles its own headings and paragraphs that way. */

.dfve-editions {
    --dfve-radius: 9px;
    --dfve-gap: 16px;
    --dfve-store: #20e3d6;
    --dfve-web: #8bff58;
    --dfve-bg: #07090a;
    --dfve-deep: #101415;
    --dfve-line: #454b4c;
    --dfve-text: #edf4f3;
    --dfve-muted: #a9b4b3;
    --dfve-font: var(--wpo-font-montserrat, Montserrat, system-ui, sans-serif);
    --dfve-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* The side inset is padding, not a narrower width: Home and Pricing force
       their WPBakery wrappers' children to full width. */
    box-sizing: border-box;
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding: 48px 35px;
    color: var(--dfve-text);
    font-family: var(--dfve-font);
    text-align: left;
}

.dfve-editions *,
.dfve-editions *::before,
.dfve-editions *::after { box-sizing: border-box; }

/* WPBakery gives every row -15px side margins for its column gutters; this row
   has one full-width column and no gutter, so the margins would only push it
   past the viewport on pages that do not clip overflow (Download). */
.vc_row.dfve-page-row { margin-right: 0 !important; margin-left: 0 !important; background: #07090a; }
.vc_row.dfve-page-row > .wpb_column > .vc_column-inner { padding-right: 0 !important; padding-left: 0 !important; }
.vc_row.dfve-page-row .wpb_content_element { margin-bottom: 0 !important; }

.dfve__intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px 48px;
    align-items: end;
    margin: 0 0 24px;
}

.dfve-editions .dfve__eyebrow,
.dfve-editions .dfve-card__channel,
.dfve-editions .dfve-card__list-label {
    margin: 0 0 12px !important;
    color: var(--dfve-store) !important;
    font: 800 11px/1.5 var(--dfve-mono) !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dfve-editions .dfve__heading {
    margin: 0 !important;
    color: var(--dfve-text) !important;
    font: 760 clamp(32px, 3.8vw, 52px)/1.02 var(--dfve-font) !important;
    letter-spacing: -0.045em;
}

.dfve-editions .dfve__description {
    margin: 0 !important;
    color: var(--dfve-muted) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.dfve__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dfve-gap);
}

.dfve-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--dfve-line);
    border-top: 3px solid var(--dfve-store);
    border-radius: var(--dfve-radius);
    background: var(--dfve-deep);
}

.dfve-card--web { border-top-color: var(--dfve-web); }
.dfve-editions .dfve-card--web .dfve-card__channel,
.dfve-editions .dfve-card--web .dfve-card__list-label { color: var(--dfve-web) !important; }
.dfve-editions .dfve-card .dfve-card__list-label--limits { color: var(--dfve-muted) !important; }

.dfve-editions .dfve-card__name {
    margin: 0 0 16px !important;
    color: var(--dfve-text) !important;
    font: 760 24px/1.2 var(--dfve-font) !important;
    letter-spacing: -0.02em;
}

.dfve-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 16px !important;
}

.dfve-editions .dfve-card__price strong {
    color: var(--dfve-text) !important;
    font: 760 34px/1.05 var(--dfve-font) !important;
    letter-spacing: -0.04em;
}

.dfve-editions .dfve-card__price span {
    color: var(--dfve-muted) !important;
    font: 700 11px/1.5 var(--dfve-mono) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dfve-editions .dfve-card__summary {
    margin: 0 0 24px !important;
    color: var(--dfve-muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

.dfve-editions .dfve-card__list {
    display: grid;
    gap: 10px;
    margin: 0 0 24px !important;
    padding: 0 !important;
    list-style: none !important;
}

.dfve-editions .dfve-card__list li {
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 26px !important;
    color: var(--dfve-text) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    list-style: none !important;
}

.dfve-card__list li::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 2px;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid var(--dfve-store);
    border-left: 2px solid var(--dfve-store);
    transform: rotate(-45deg);
}

.dfve-card--web .dfve-card__list li::before { border-color: var(--dfve-web); }

.dfve-editions .dfve-card__list--limits li { color: var(--dfve-muted) !important; }

.dfve-card__list--limits li::before {
    top: 0.72em;
    height: 0;
    border-left: 0;
    border-bottom-color: var(--dfve-muted);
    transform: none;
}

.dfve-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.dfve-editions .dfve-button,
.dfve-editions .dfve-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid var(--dfve-line);
    border-radius: var(--dfve-radius);
    color: var(--dfve-text) !important;
    font: 800 11px/1.2 var(--dfve-mono) !important;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    text-transform: uppercase;
}

.dfve-editions a.dfve-button:hover,
.dfve-editions a.dfve-button:focus-visible { border-color: var(--dfve-store); color: var(--dfve-store) !important; }

.dfve-editions .dfve-button--store,
.dfve-editions .dfve-button--web { border-color: transparent; color: #06100f !important; }
.dfve-button--store { background: var(--dfve-store); }
.dfve-button--web { background: var(--dfve-web); }

.dfve-editions a.dfve-button--store:hover,
.dfve-editions a.dfve-button--store:focus-visible,
.dfve-editions a.dfve-button--web:hover,
.dfve-editions a.dfve-button--web:focus-visible { border-color: transparent; color: #06100f !important; filter: brightness(1.08); }

.dfve-editions .dfve-pending {
    border-style: dashed;
    border-color: var(--dfve-store);
    color: var(--dfve-store) !important;
}

.dfve-compare {
    margin-top: 24px;
    padding: 8px 24px 16px;
    border: 1px solid var(--dfve-line);
    border-radius: var(--dfve-radius);
    background: var(--dfve-deep);
    overflow-x: auto;
}

.dfve-editions .dfve-compare table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
}

.dfve-editions .dfve-compare caption {
    padding: 16px 0;
    color: var(--dfve-text) !important;
    font: 760 20px/1.3 var(--dfve-font) !important;
    text-align: left;
}

.dfve-editions .dfve-compare th,
.dfve-editions .dfve-compare td {
    padding: 16px 0;
    border: 0 !important;
    border-top: 1px solid var(--dfve-line) !important;
    background: transparent !important;
    color: var(--dfve-text) !important;
    text-align: left;
    vertical-align: top;
}

.dfve-editions .dfve-compare thead th {
    padding-top: 0;
    border-top: 0 !important;
    color: var(--dfve-muted) !important;
    font: 800 11px/1.5 var(--dfve-mono) !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dfve-editions .dfve-compare thead th:not(:first-child),
.dfve-editions .dfve-compare td { width: 130px; padding-left: 16px; text-align: center; }

.dfve-editions .dfve-compare tbody th span {
    display: block;
    color: var(--dfve-text) !important;
    font: 700 15px/1.4 var(--dfve-font) !important;
}

.dfve-editions .dfve-compare tbody th small {
    display: block;
    margin-top: 4px;
    color: var(--dfve-muted) !important;
    font: 400 13px/1.5 var(--dfve-font) !important;
}

.dfve-editions .dfve-state { font: 800 12px/1.5 var(--dfve-mono) !important; letter-spacing: 0.06em; text-transform: uppercase; }
.dfve-editions .dfve-state--yes { color: var(--dfve-web) !important; }
.dfve-editions .dfve-state--limited { color: #ffc857 !important; }
.dfve-editions .dfve-state--no { color: var(--dfve-muted) !important; }

.dfve-editions .dfve__footnote {
    margin: 24px 0 0 !important;
    color: var(--dfve-muted) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.dfve-editions .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .dfve__intro,
    .dfve__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .dfve-editions { padding: 34px 16px; }
    /* The Design gap arrives as an inline variable, so cap it here rather than redefine it. */
    .dfve__cards { gap: min(var(--dfve-gap), 10px); }
    .dfve__intro { gap: 16px; margin-bottom: 20px; }
    .dfve-card { padding: 20px; }
    .dfve-editions .dfve-card__price strong { font-size: 30px !important; }
    .dfve-compare { margin-top: 20px; padding: 4px 20px 12px; overflow-x: visible; }

    /* Stack each row: capability on top, the two editions side by side under it. */
    .dfve-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .dfve-compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--dfve-line); }
    .dfve-editions .dfve-compare tbody th { grid-column: 1 / -1; padding: 0; border-top: 0 !important; }
    .dfve-editions .dfve-compare td { width: auto; padding: 0; border-top: 0 !important; text-align: left; }
    .dfve-compare td::before { content: attr(data-label) ": "; color: var(--dfve-muted); }
}