/*
 * QWERTYMAIL Product Design System
 * Common visual foundation for Builder / Prices / Triggers / Templates / SMTP API.
 * Page CSS files should contain only unique product components and layout details.
 */

.qw-product-page {
    --qps-accent: var(--qw-accent, #2f2dd4);
    --qps-accent-dark: var(--qw-accent-hover, #2422ae);
    --qps-accent-soft: #efefff;
    --qps-ink: var(--qw-heading, #302b2b);
    --qps-text: var(--qw-muted-2, #5f5d55);
    --qps-bg: var(--qw-bg, #f7f7f4);
    --qps-card: #fff;
    --qps-border: var(--qw-border-soft, rgba(48,43,43,.07));
    --qps-dark: #171722;
    --qps-container: 1180px;

    --qps-eyebrow-min-height: 34px;
    --qps-eyebrow-radius: 10px;
    --qps-eyebrow-border: 1px solid #d9d8ff;
    --qps-eyebrow-bg: var(--qps-accent-soft);
    --qps-eyebrow-line: 1.2;
    --qps-eyebrow-dark-border: 1px solid rgba(255,255,255,.14);
    --qps-eyebrow-dark-bg: rgba(255,255,255,.08);
    --qps-eyebrow-dark-color: #d2d1ff;

    --qps-button-shadow: 0 14px 30px rgba(47,45,212,.16);
    --qps-title-max: 760px;
    --qps-title-size: clamp(42px,4.7vw,64px);
    --qps-title-weight: 760;
    --qps-lead-max: 720px;
    --qps-meta-color: #74736f;

    --qps-section-pad: 92px;
    --qps-section-pad-mobile: 68px;
    --qps-section-head-max: 780px;
    --qps-section-head-left-max: var(--qps-section-head-max);
    --qps-section-head-gap: 42px;
    --qps-heading-size: clamp(32px,3.8vw,48px);
    --qps-heading-weight: 750;
    --qps-copy-margin: 16px;
    --qps-copy-line: 1.7;

    --qps-faq-pad-top: 50px;
    --qps-faq-pad-bottom: 0;
    --qps-faq-summary-weight: 750;

    --qps-proof-min-height: 106px;
    --qps-proof-span-color: #7c7b76;
    --qps-proof-span-line: 1.45;

    /* Section surfaces: backgrounds stay inside the content container, never full-width. */
    --qps-surface-radius: 30px;
    --qps-surface-pad-x: clamp(28px, 4.4vw, 54px);
    --qps-surface-pad-y: clamp(32px, 4.6vw, 56px);
    --qps-surface-border: rgba(48,43,43,.075);
    --qps-surface-shadow: 0 18px 52px rgba(36,35,54,.045);
    --qps-surface-white: #ffffff;
    --qps-surface-mist: #fbfbf8;
    --qps-surface-tint: #f4f4ff;

    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: 0;
    overflow: hidden;
    background: var(--qps-bg);
    color: var(--qps-ink);
    font-family: Inter, Arial, sans-serif;
}

.qw-product-page *,
.qw-product-page *::before,
.qw-product-page *::after {
    box-sizing: border-box;
}

/* Compatibility aliases: unique page components can keep their current variables. */
.qwerty-builder-page {
    --qps-container: 1200px;
    --qps-accent-soft: #f0efff;
    --qps-ink: var(--qw-heading, #302b2b);
    --qps-text: var(--qw-muted-2, #5f5d55);
    --qps-border: var(--qw-border-soft, rgba(48,43,43,.07));
    --qps-dark: #11111a;
    --qps-button-shadow: 0 16px 30px rgba(47,45,212,.18);
    --qps-title-max: 650px;
    --qps-title-size: clamp(40px,4.5vw,62px);
    --qps-title-weight: 750;
    --qps-lead-max: 650px;
    --qps-meta-color: #737373;
    --qps-section-head-max: 760px;
    --qps-section-head-left-max: 700px;
    --qps-heading-size: clamp(32px,3.7vw,46px);
    --qps-heading-weight: 750;
    --qps-faq-pad-top: 52px;

    --qb-accent: var(--qps-accent);
    --qb-accent-dark: var(--qps-accent-dark);
    --qb-ink: var(--qps-ink);
    --qb-text: var(--qps-text);
    --qb-soft: var(--qps-bg);
    --qb-border: var(--qps-border);
    --qb-white: #fff;
    --qb-dark: var(--qps-dark);
}

.qwerty-prices-page {
    --qps-ink: #302b2b;
    --qps-text: #65635c;
    --qps-bg: #f7f7f4;
    --qps-border: rgba(48,43,43,.10);
    --qps-eyebrow-min-height: 32px;
    --qps-eyebrow-radius: 999px;
    --qps-eyebrow-border: 0;
    --qps-eyebrow-bg: rgba(47,45,212,.08);
    --qps-eyebrow-line: 1;
    --qps-button-shadow: 0 12px 28px rgba(47,45,212,.15);
    --qps-title-max: 750px;
    --qps-title-size: clamp(42px,5vw,64px);
    --qps-title-weight: 750;
    --qps-meta-color: #858279;
    --qps-section-pad: 76px;
    --qps-section-pad-mobile: 58px;
    --qps-section-head-max: 760px;
    --qps-section-head-left-max: 760px;
    --qps-section-head-gap: 36px;
    --qps-heading-size: clamp(32px,4vw,46px);
    --qps-heading-weight: 750;
    --qps-copy-margin: 15px;
    --qps-copy-line: 1.68;
    --qps-faq-pad-top: 54px;
    --qps-faq-pad-bottom: 88px;

    --qp-bg: var(--qps-bg);
    --qp-card: #fff;
    --qp-ink: var(--qps-ink);
    --qp-text: var(--qps-text);
    --qp-muted: #858279;
    --qp-accent: var(--qps-accent);
    --qp-accent-dark: #2422b8;
    --qp-accent-soft: rgba(47,45,212,.08);
    --qp-border: rgba(48,43,43,.10);
    --qp-border-soft: rgba(48,43,43,.07);
    --qp-shadow: 0 16px 42px rgba(48,43,43,.055);
    --qp-shadow-lg: 0 26px 70px rgba(48,43,43,.075);
    --qp-radius: 18px;
    --qp-radius-lg: 28px;
    --qp-container: 1180px;
}

.qt-page {
    --qps-ink: #242424;
    --qps-text: #6e6d68;
    --qps-border: #e4e4df;
    --qps-title-max: 720px;
    --qps-lead-max: 700px;
    --qps-faq-pad-top: 50px;

    --qt-accent: var(--qps-accent);
    --qt-accent-soft: var(--qps-accent-soft);
    --qt-ink: var(--qps-ink);
    --qt-text: var(--qps-text);
    --qt-bg: var(--qps-bg);
    --qt-card: #fff;
    --qt-border: var(--qps-border);
    --qt-dark: var(--qps-dark);
}

.qwerty-templates-page {
    --qps-ink: #242424;
    --qps-text: #6e6d68;
    --qps-border: #e4e4df;
    --qps-eyebrow-dark-border: 1px solid rgba(255,255,255,.15);
    --qps-section-pad: 88px;
    --qps-section-pad-mobile: 64px;
    --qps-section-head-gap: 40px;
    --qps-heading-size: clamp(32px,3.7vw,46px);
    --qps-heading-weight: 760;
    --qps-faq-pad-top: 45px;
    --qps-faq-summary-weight: 760;
    --qps-proof-min-height: 104px;
    --qps-proof-span-color: #7b7a76;
    --qps-proof-span-line: normal;

    --qtpl-accent: var(--qps-accent);
    --qtpl-accent-soft: var(--qps-accent-soft);
    --qtpl-ink: var(--qps-ink);
    --qtpl-text: var(--qps-text);
    --qtpl-bg: var(--qps-bg);
    --qtpl-card: #fff;
    --qtpl-border: var(--qps-border);
    --qtpl-dark: var(--qps-dark);
}

.qapi-page {
    --qps-ink: #242424;
    --qps-text: #6e6d68;
    --qps-border: #e4e4df;
    --qps-eyebrow-dark-color: #d5d4ff;
    --qps-section-head-max: 800px;
    --qps-section-head-left-max: 790px;
    --qps-faq-pad-top: 56px;

    --qapi-accent: var(--qps-accent);
    --qapi-accent-soft: var(--qps-accent-soft);
    --qapi-ink: var(--qps-ink);
    --qapi-text: var(--qps-text);
    --qapi-bg: var(--qps-bg);
    --qapi-card: #fff;
    --qapi-border: var(--qps-border);
    --qapi-dark: var(--qps-dark);
}

.qw-product-container {
    width: min(var(--qps-container), calc(100% - 48px));
    margin: 0 auto;
}

.qw-product-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: var(--qps-eyebrow-min-height);
    padding: 7px 12px;
    border: var(--qps-eyebrow-border);
    border-radius: var(--qps-eyebrow-radius);
    background: var(--qps-eyebrow-bg);
    color: var(--qps-accent);
    font-size: 13px;
    line-height: var(--qps-eyebrow-line);
    font-weight: 700;
}

.qw-product-eyebrow--dark {
    border: var(--qps-eyebrow-dark-border);
    background: var(--qps-eyebrow-dark-bg);
    color: var(--qps-eyebrow-dark-color);
}

.qw-product-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.qw-product-button--primary {
    background: var(--qps-accent);
    color: #fff !important;
    box-shadow: var(--qps-button-shadow);
}

.qw-product-button--light {
    background: #fff;
    color: var(--qps-accent) !important;
}

.qw-product-hero h1 {
    max-width: var(--qps-title-max);
    margin: 18px 0;
    color: var(--qps-ink);
    font-size: var(--qps-title-size);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: var(--qps-title-weight);
}

.qw-product-lead {
    max-width: var(--qps-lead-max);
    margin: 0;
    color: var(--qps-text);
    font-size: 18px;
    line-height: 1.68;
}

.qw-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.qw-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 22px;
    color: var(--qps-meta-color);
    font-size: 13px;
    line-height: 1.4;
}

.qw-product-section {
    padding: var(--qps-section-pad) 0;
    background: transparent;
}

.qw-product-section-head {
    max-width: var(--qps-section-head-max);
    margin: 0 auto var(--qps-section-head-gap);
    text-align: center;
}

.qw-product-section-head--left {
    max-width: var(--qps-section-head-left-max);
    margin-left: 0;
    text-align: left;
}

.qw-product-section-head h2,
.qw-product-copy h2 {
    margin: 16px 0 0;
    color: var(--qps-ink);
    font-size: var(--qps-heading-size);
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: var(--qps-heading-weight);
}

.qw-product-section-head p,
.qw-product-copy p {
    margin: var(--qps-copy-margin) 0 0;
    color: var(--qps-text);
    font-size: 16px;
    line-height: var(--qps-copy-line);
}

.qw-product-faq {
    padding-top: var(--qps-faq-pad-top);
    padding-bottom: var(--qps-faq-pad-bottom);
}

.qw-product-faq-list {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--qps-border);
}

.qw-product-faq-list details {
    padding: 22px 0;
    border-bottom: 1px solid var(--qps-border);
}

.qw-product-faq-list summary {
    color: var(--qps-ink);
    font-size: 17px;
    line-height: 1.45;
    font-weight: var(--qps-faq-summary-weight);
    cursor: pointer;
}

.qw-product-faq-list details p {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--qps-text);
    font-size: 14px;
    line-height: 1.7;
}

/* Shared proof strip: Triggers / Templates / SMTP API. */
.qw-product-proof {
    border: 0;
}

.qw-product-proof-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.qw-product-proof-grid > div {
    min-height: var(--qps-proof-min-height);
    padding: 26px 24px;
    border-right: 1px solid var(--qps-border);
}

.qw-product-proof-grid > div:last-child { border-right: 0; }
.qw-product-proof strong,
.qw-product-proof span { display: block; }
.qw-product-proof strong { color: var(--qps-ink); font-size: 15px; }
.qw-product-proof span {
    margin-top: 5px;
    color: var(--qps-proof-span-color);
    font-size: 13px;
    line-height: var(--qps-proof-span-line);
}


/* =========================================================
   PRODUCT SECTION BACKGROUNDS
   Surfaces live inside .qw-product-container so the general
   #f7f7f4 page background remains continuous between blocks.
   ========================================================= */
.qw-product-section--surface > .qw-product-container,
.qw-product-section--tint > .qw-product-container,
.qw-product-section--mist > .qw-product-container {
    position: relative;
    padding: var(--qps-surface-pad-y) var(--qps-surface-pad-x);
    border: 1px solid var(--qps-surface-border);
    border-radius: var(--qps-surface-radius);
    box-shadow: var(--qps-surface-shadow);
}

.qw-product-section--surface > .qw-product-container {
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.96));
}

.qw-product-section--mist > .qw-product-container {
    background: linear-gradient(145deg, #fbfbf8 0%, #f5f5f1 100%);
}

.qw-product-section--tint > .qw-product-container {
    border-color: rgba(47,45,212,.105);
    background:
        radial-gradient(circle at 92% 8%, rgba(47,45,212,.105) 0, rgba(47,45,212,0) 31%),
        radial-gradient(circle at 5% 92%, rgba(122,66,255,.055) 0, rgba(122,66,255,0) 27%),
        linear-gradient(135deg, #f5f5ff 0%, #fafaff 54%, #ffffff 100%);
}

/* Surfaced blocks own their internal spacing, so their outer section gap can be
   smaller than a plain text section without turning into full-width stripes. */
.qw-product-section.qw-product-section--surface,
.qw-product-section.qw-product-section--tint,
.qw-product-section.qw-product-section--mist {
    padding: 34px 0;
}

/* Proof strips become one calm card instead of a full-width bordered band. */
.qw-product-proof {
    padding: 0 0 22px;
    border: 0;
}

.qw-product-proof-grid {
    overflow: hidden;
    border: 1px solid var(--qps-surface-border);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 36px rgba(36,35,54,.035);
}

@media (max-width: 760px) {
    .qw-product-section--surface > .qw-product-container,
    .qw-product-section--tint > .qw-product-container,
    .qw-product-section--mist > .qw-product-container {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .qw-product-section.qw-product-section--surface,
    .qw-product-section.qw-product-section--tint,
    .qw-product-section.qw-product-section--mist {
        padding: 24px 0;
    }
}

@media (max-width: 480px) {
    .qw-product-section--surface > .qw-product-container,
    .qw-product-section--tint > .qw-product-container,
    .qw-product-section--mist > .qw-product-container {
        padding: 24px 18px;
        border-radius: 20px;
    }
}

/* Responsive foundation. Price page keeps its historical 720/420 breakpoints. */
@media (max-width: 760px) {
    .qwerty-builder-page .qw-product-container,
    .qt-page .qw-product-container,
    .qwerty-templates-page .qw-product-container,
    .qapi-page .qw-product-container {
        width: min(100% - 32px, var(--qps-container));
    }

    .qwerty-builder-page .qw-product-hero h1,
    .qt-page .qw-product-hero h1,
    .qwerty-templates-page .qw-product-hero h1,
    .qapi-page .qw-product-hero h1 { font-size: 39px; }

    .qwerty-builder-page .qw-product-lead,
    .qt-page .qw-product-lead,
    .qwerty-templates-page .qw-product-lead,
    .qapi-page .qw-product-lead { font-size: 16px; }

    .qwerty-builder-page .qw-product-button,
    .qt-page .qw-product-button,
    .qwerty-templates-page .qw-product-button,
    .qapi-page .qw-product-button { width: 100%; }

    .qwerty-builder-page .qw-product-actions,
    .qt-page .qw-product-actions,
    .qwerty-templates-page .qw-product-actions,
    .qapi-page .qw-product-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .qwerty-builder-page .qw-product-meta,
    .qt-page .qw-product-meta,
    .qwerty-templates-page .qw-product-meta,
    .qapi-page .qw-product-meta {
        display: grid;
        gap: 7px;
    }

    .qwerty-builder-page .qw-product-section,
    .qt-page .qw-product-section,
    .qwerty-templates-page .qw-product-section,
    .qapi-page .qw-product-section { padding: var(--qps-section-pad-mobile) 0; }

    .qw-product-proof-grid { grid-template-columns: repeat(2,1fr); }
    .qw-product-proof-grid > div { border-bottom: 1px solid var(--qps-border); }
    .qw-product-proof-grid > div:nth-child(2) { border-right: 0; }
    .qw-product-proof-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
    .qwerty-prices-page .qw-product-container {
        width: min(100% - 32px, var(--qps-container));
    }
    .qwerty-prices-page .qw-product-hero h1 { font-size: 38px; }
    .qwerty-prices-page .qw-product-lead { font-size: 16px; }
    .qwerty-prices-page .qw-product-button { width: 100%; }
    .qwerty-prices-page .qw-product-actions { display: grid; grid-template-columns: 1fr; }
    .qwerty-prices-page .qw-product-meta { display: grid; gap: 7px; }
    .qwerty-prices-page .qw-product-section { padding: var(--qps-section-pad-mobile) 0; }
    .qwerty-prices-page .qw-product-section-head { margin-bottom: 28px; }
}

@media (max-width: 480px) {
    .qwerty-builder-page .qw-product-hero h1,
    .qt-page .qw-product-hero h1,
    .qwerty-templates-page .qw-product-hero h1,
    .qapi-page .qw-product-hero h1 { font-size: 34px; }

    .qw-product-proof-grid { grid-template-columns: 1fr; }
    .qw-product-proof-grid > div { border-right: 0; border-bottom: 1px solid var(--qps-border); }
    .qw-product-proof-grid > div:last-child { border-bottom: 0; }
}

@media (max-width: 420px) {
    .qwerty-prices-page .qw-product-hero h1 { font-size: 33px; }
}