/* Loaded last. Holds the offer strip, the founder block, the guarantee and the
   handful of overrides that bring the nav, hero and pricing onto one button
   colour. Selectors carry a section prefix where an earlier sheet sets the
   same property with more weight. */

:root {
    --plum: #3c34d4;
    --plum-deep: #251dbd;
    --plum-ink: #191d3e;
}

/* Offer strip */
.offer-strip {
    align-items: center;
    background: var(--plum-ink);
    color: #d4d6ed;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 4px 28px;
    justify-content: center;
    line-height: 1.5;
    padding: 9px 20px;
}

.offer-strip strong {
    color: #fff;
    font-weight: 700;
}

.offer-strip-guarantee {
    color: #babcdf;
}

.offer-strip:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.offer-strip:focus-visible {
    outline: 3px solid #adb1e4;
    outline-offset: -3px;
}

@media (max-width: 700px) {
    .offer-strip {
        font-size: 13px;
        gap: 2px 18px;
    }

    .offer-strip-guarantee {
        display: none;
    }
}

/* One primary button colour across nav, hero, AI Cocktail and pricing */
[data-live-nav] .nav-buy {
    background: var(--plum);
    border-radius: 11px;
    color: #fff;
    font-weight: 650;
    padding: 10px 22px;
    transition: background 0.18s;
    white-space: nowrap;
}

[data-live-nav] .nav-buy:hover {
    background: var(--plum-deep);
}

[data-live-nav] .nav-buy:focus-visible {
    outline: 3px solid #6963dd;
    outline-offset: 3px;
}

.cocktail-studio a.btn {
    background: var(--plum);
}

.cocktail-studio a.btn:hover {
    background: var(--plum-deep);
}

/* Hero: a shorter lead leaves room for the product above the fold */
.hero.hero-canvas {
    padding-top: 52px;
}

.hero-canvas .hero-category {
    margin-bottom: 18px;
}

.hero-canvas .lead {
    margin: 22px auto 26px;
    max-width: 610px;
}

.hero-terms {
    color: #54586e;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 6px 22px;
    justify-content: center;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.hero-terms li {
    align-items: center;
    display: flex;
    gap: 7px;
}

.hero-terms li::before {
    color: #615ccf;
    content: '✓';
    font-size: 13px;
}

.hero-canvas .hero-product-shot {
    margin-top: 40px;
}

@media (max-width: 600px) {
    .hero.hero-canvas {
        padding-top: 36px;
    }

    .hero-terms {
        font-size: 13px;
        gap: 5px 16px;
    }
}

/* Founder */
.developer-assurance .founder {
    align-items: center;
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
}

.developer-assurance .founder img {
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffff2e;
    flex-shrink: 0;
    height: 76px;
    object-fit: cover;
    width: 76px;
}

.developer-assurance .founder strong {
    display: block;
    font-size: 19px;
    font-weight: 700;
}

.developer-assurance .founder span {
    display: block;
    font-size: 14px;
    margin-top: 2px;
    opacity: 0.72;
}

.developer-assurance .founder-terms {
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 8px 24px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.developer-assurance .founder-terms li {
    align-items: center;
    display: flex;
    gap: 8px;
}

.developer-assurance .founder-terms li::before {
    content: '✓';
    opacity: 0.75;
}

/* Pricing */
#pricing .pricing-title {
    color: var(--ink);
    font-size: clamp(34px, 4.2vw, 52px);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.1;
    margin-bottom: 22px;
}

#pricing .price-everything {
    color: #2d3266;
    font-size: 15px;
    font-weight: 650;
    margin: 0 0 18px;
}

#pricing .pricing-guarantee {
    align-items: center;
    background: #fff;
    border: 1px solid #d6d7ec;
    border-radius: 14px;
    display: flex;
    gap: 14px;
    margin: 0 auto 22px;
    max-width: 760px;
    padding: 16px 22px;
}

#pricing .pricing-guarantee svg {
    color: #3f8a5a;
    flex-shrink: 0;
    height: 28px;
    width: 28px;
}

#pricing .pricing-guarantee p {
    color: #4f5267;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

#pricing .pricing-guarantee strong {
    color: #191d3e;
}

#pricing .pricing-guarantee a {
    color: #2920cc;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* The bundle is the featured offer; lead with it when the cards stack. */
    #pricing .pricing-options [data-package='bundle'] {
        order: -1;
    }

    #pricing .pricing-guarantee {
        align-items: flex-start;
        padding: 15px 16px;
    }
}

#pricing .pricing-guarantee p {
    text-align: left;
}

/* Our own products: a two-by-two grid instead of four full-width rows */
.built-with .project-grid {
    display: grid;
    gap: 48px 36px;
    grid-template-columns: 1fr 1fr;
}

.built-with .project-example {
    display: block;
}

.built-with .project-description {
    margin-top: 22px;
    max-width: none;
}

.built-with .project-description h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

.built-with .project-description p {
    font-size: 17px;
    line-height: 1.55;
}

.built-with .project-foundation {
    display: block;
    margin-top: 8px;
}

@media (max-width: 650px) {
    .built-with .project-grid {
        gap: 38px;
        grid-template-columns: 1fr;
    }
}

/* Feature list: collapsed by script, with the cut softened by a fade */
.inventory-grid[data-collapsed='true'] {
    max-height: 520px;
    position: relative;
}

.inventory-grid[data-collapsed='true']::after {
    background: linear-gradient(180deg, #e5e7f200, #e5e7f2 88%);
    bottom: 0;
    content: '';
    height: 150px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.inventory-toggle {
    background: #fff;
    border: 1px solid #c0c2e1;
    border-radius: 11px;
    color: #231cb4;
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    margin: 22px auto 0;
    padding: 13px 24px;
    transition: background 0.18s;
}

.inventory-toggle[hidden] {
    display: none;
}

.inventory-toggle:hover {
    background: #f5f5fa;
}

.inventory-toggle:focus-visible {
    outline: 3px solid #6963dd;
    outline-offset: 3px;
}

.inventory-grid[data-collapsed='true'] {
    overflow: hidden;
}

/* Screenshot frames: no title bars or captions, so the image gets the space.
   The labels stay in the markup for screen readers and for the gallery
   script, which writes the current title and position into them. */
.hero-product-shot figcaption,
.showcase-frame .showcase-bar,
.feature-detail figure figcaption {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hero-canvas .hero-product-shot {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    padding: 0;
}

.hero-canvas .hero-product-shot img {
    border-radius: 0;
}

/* Each capture shows at its own proportions instead of letterboxed in 16:9. */
.showcase-stage .showcase-expand img {
    aspect-ratio: auto;
    max-height: none;
}

.feature-detail figure {
    overflow: hidden;
    padding: 0;
}

.feature-detail figure img {
    display: block;
    width: 100%;
}

/* Feature screenshots open the on-page viewer, like the hero and the tour. */
.feature-detail .feature-zoom {
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    padding: 0;
    width: 100%;
}

.feature-detail .feature-zoom:focus-visible {
    outline: 3px solid #6963dd;
    outline-offset: -3px;
}

/* Proof strip under the hero */
.proof-strip {
    padding-bottom: 46px;
    padding-top: 6px;
}

.proof-strip dl {
    border-top: 1px solid #dde0ef;
    display: grid;
    gap: 24px 32px;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding-top: 34px;
}

.proof-strip dt {
    color: #222752;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.proof-strip dd {
    color: #616478;
    font-size: 15px;
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 210px;
}

@media (max-width: 800px) {
    .proof-strip dl {
        grid-template-columns: 1fr 1fr;
    }

    .proof-strip dt {
        font-size: 28px;
    }

    .proof-strip dd {
        font-size: 14px;
    }
}

/* Buy band: a slim, full-width strip between sections. It carries its own
   colour so it also reads as the divider between them. */
.buy-band {
    background: #231cb4;
    color: #e4e6f3;
}

.buy-band-inner {
    align-items: center;
    display: flex;
    gap: 14px 32px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    padding: 22px 32px;
}

.buy-band p {
    color: #e4e6f3;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.buy-band p strong {
    color: #fff;
}

.buy-band a {
    align-items: center;
    background: #fff;
    border-radius: 10px;
    color: #252a5a;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 650;
    gap: 10px;
    padding: 11px 20px;
    transition: background 0.18s;
}

.buy-band a:hover {
    background: #edeef7;
}

.buy-band a:focus-visible {
    outline: 3px solid #d1d3f0;
    outline-offset: 3px;
}

.buy-band a svg {
    height: 18px;
    width: 18px;
}

@media (max-width: 800px) {
    .buy-band-inner {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 22px;
    }

    .buy-band p {
        font-size: 15px;
    }

    .buy-band a {
        justify-content: center;
    }
}

/* Phones: a buy bar that follows the reader between the hero and the pricing */
.mobile-buy {
    display: none;
}

@media (max-width: 700px) {
    .mobile-buy:not([hidden]) {
        align-items: center;
        background: #fff;
        border-top: 1px solid #d6d7ec;
        bottom: 0;
        box-shadow: 0 -8px 24px #191d3e14;
        display: flex;
        gap: 14px;
        justify-content: space-between;
        left: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        z-index: 40;
    }

    .mobile-buy p {
        color: #4f5267;
        font-size: 14px;
        margin: 0;
    }

    .mobile-buy p strong {
        color: #191d3e;
    }

    .mobile-buy a {
        background: var(--plum);
        border-radius: 10px;
        color: #fff;
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 650;
        padding: 12px 20px;
    }

    /* Once the reader scrolls, the header gives the screen back. */
    [data-live-nav].is-scrolled .offer-strip {
        display: none;
    }

    [data-live-nav].is-scrolled > .container > .flex {
        padding-bottom: 8px;
        padding-top: 8px;
    }

    [data-live-nav] .mascot-wordmark img {
        height: 38px;
        width: 38px;
    }
}

/* Pricing: what the bundle replaces */
#pricing .price-math {
    border-top: 1px solid #e1e3f0;
    color: #616478;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 14px;
    padding-top: 14px;
}

#pricing .price-math strong {
    color: #191d3e;
}

#pricing .price-more {
    color: #2920cc;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Two surfaces that came out too saturated when the palette moved to indigo. */
.buy-band {
    background: #3b33c9;
}

.release-review-card .release-command {
    background: #2b3063;
}

.release-review-card .release-command > span,
.release-review-card .release-command > p,
.release-review-card .release-command small {
    color: #aab0e0;
}
.inventory-all{color:#3c34d4;font-weight:650;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.inventory-all:hover{color:#251dbd}