/*
 * Page styles for the product site: home and about. Loaded after marketing.css
 * on every product page, so every rule here is scoped to a class only these
 * two pages use:
 *
 *   .home-*  the home page
 *   .about-* the about page
 *   .ha-*    shared by both (edition cards with a picture, the CTA artwork)
 *
 * Colours come from brand.css tokens only - no blue. Illustrations are the
 * home-*.svg / about-*.svg files in assets/images/illustrations.
 */

/* ================================================================ home: hero */

body.marketing .home-hero {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.home-hero-visual {
    position: relative;
    isolation: isolate;
}

/* A warm glow behind the product picture, so it sits on colour, not on white. */
.home-hero-visual::before {
    content: "";
    position: absolute;
    inset: 10% 6% 4% 12%;
    z-index: -1;
    border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
    background: var(--brand-gradient);
    opacity: .16;
    filter: blur(42px);
}

body.marketing .home-hero-art {
    max-width: 728px;
    /* The picture carries its own soft shadows. */
    filter: none;
}

/* On wide screens the picture may lean a little past its column; the hero clips. */
@media (min-width: 1200px) {
    body.marketing .home-hero-art {
        width: 112%;
        max-width: none;
        margin-left: -3%;
    }
}

/* The four facts under the hero, as one raised panel. */
body.marketing .home-trust {
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    gap: 1.25rem 1.5rem;
}

/* Two by two on tablets, four across on desktops - never three and one. */
@media (min-width: 576px) {
    body.marketing .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    body.marketing .home-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-trust .trust-item > i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.1rem;
}

.home-trust .trust-item:nth-child(2) > i { background: var(--red-50);    color: var(--red-600); }
.home-trust .trust-item:nth-child(3) > i { background: var(--accent-50); color: var(--accent-600); }
.home-trust .trust-item:nth-child(4) > i { background: var(--green-50);  color: var(--green-600); }

/* ============================================= home: feature split rows */

.home-lead {
    position: relative;
    background: var(--surface);
}

.home-splits {
    display: grid;
    gap: clamp(3rem, 7vw, 5.5rem);
}

.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 768px) {
    .home-split {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 5rem);
    }

    /* Alternate the picture left and right, so the eye zig-zags down the page. */
    .home-split:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    }

    .home-split:nth-child(even) .home-split-media { order: 2; }
}

.home-split-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(.5rem, 2vw, 1.25rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(70% 60% at 50% 45%, var(--surface) 0%, transparent 100%),
        linear-gradient(150deg, var(--acc-soft, var(--brand-50)) 0%, var(--acc-soft, var(--brand-50)) 40%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
}

/* A faint dot grid in the row's own colour, fading out towards the corner. */
.home-split-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(var(--acc, var(--brand)) 1px, transparent 1.5px);
    background-size: 20px 20px;
    opacity: .12;
    -webkit-mask-image: radial-gradient(80% 70% at 20% 10%, #000 0%, transparent 75%);
            mask-image: radial-gradient(80% 70% at 20% 10%, #000 0%, transparent 75%);
}

.home-split-media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.home-split:hover .home-split-media img { transform: translateY(-4px) scale(1.012); }

.home-split-body { max-width: 34rem; }

.home-split-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--acc-soft, var(--brand-50));
    color: var(--acc, var(--brand));
    font-size: 1.4rem;
    box-shadow: inset 0 0 0 1px rgba(11, 15, 26, .04);
}

body.marketing .home-split-body h3 {
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    line-height: 1.18;
    margin: 1.1rem 0 .8rem;
}

.home-split-body p {
    font-size: 1.05rem;
    color: var(--ink-body);
}

.home-split-body p:last-child { margin-bottom: 0; }

/* A short rule in the row's colour under the text block. */
.home-split-body::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 1.5rem;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--acc, var(--brand)), transparent);
}

/* ================================================== home: module groups */

body.marketing .home-modules {
    position: relative;
    background:
        radial-gradient(56rem 26rem at 50% -6%, var(--brand-100) 0%, transparent 70%),
        linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 88%);
    border-block: 1px solid var(--line);
}

body.marketing .home-mod {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.home-mod-art {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: .9rem 1rem .25rem;
    background: linear-gradient(165deg, var(--acc-soft, var(--brand-50)) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--line-soft);
}

.home-mod-art img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.home-mod:hover .home-mod-art img { transform: translateY(-3px) scale(1.04); }

/* A group without a picture yet shows its glyph, large, in the same panel. */
.home-mod-art-glyph {
    min-height: 140px;
    align-items: center;
    font-size: 3rem;
    color: var(--acc, var(--brand));
}

.home-mod > h3,
.home-mod > p,
.home-mod > .module-card-more {
    padding-inline: 1.4rem;
}

body.marketing .home-mod > h3 { margin-top: 1.2rem; }

.home-mod > .module-card-more {
    margin-top: auto;
    padding-top: 1rem;
    padding-bottom: 1.35rem;
}

.home-modules-note { max-width: 46rem; margin-inline: auto; }

/* ====================================================== home: how it starts */

body.marketing .home-start { background: var(--canvas); }

.home-steps {
    position: relative;
    gap: 1.75rem;
    /* One column, then three - never two and an orphan. */
    grid-template-columns: minmax(0, 1fr);
}

/* A dashed thread joining the three numbers, visible only between the cards. */
@media (min-width: 768px) {
    .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

@media (min-width: 992px) {
    .home-steps { gap: 1.75rem; }

    .home-steps::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 0;
        border-top: 2px dashed var(--brand-300);
        z-index: 0;
    }
}

body.marketing .home-steps .step {
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0 0 1.6rem;
    box-shadow: var(--shadow-sm);
}

.home-steps .step-number { z-index: 2; left: 1.4rem; }

.home-step-art {
    overflow: hidden;
    padding: 1.1rem 1rem .1rem;
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(170deg, var(--accent-50) 0%, var(--surface) 100%);
}

.home-steps .step:nth-child(2) .home-step-art { background: linear-gradient(170deg, var(--brand-50) 0%, var(--surface) 100%); }
.home-steps .step:nth-child(3) .home-step-art { background: linear-gradient(170deg, var(--green-50) 0%, var(--surface) 100%); }

.home-step-art img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-inline: auto;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.home-steps .step:hover .home-step-art img { transform: translateY(-3px); }

body.marketing .home-steps .step h3 { margin: 1.2rem 0 .45rem; padding-inline: 1.5rem; font-size: 1.12rem; }
.home-steps .step p { padding-inline: 1.5rem; }

/* ============================================ shared: edition cards with art */

body.marketing .home-editions {
    position: relative;
    background:
        radial-gradient(40rem 22rem at 0% 100%, var(--brand-50) 0%, transparent 70%),
        radial-gradient(40rem 22rem at 100% 0%, var(--accent-50) 0%, transparent 70%),
        var(--surface);
    border-top: 1px solid var(--line);
}

body.marketing .ha-edition {
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ha-edition-art {
    padding: 1.1rem 1.5rem .2rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(165deg, var(--brand-50) 0%, var(--surface) 100%);
}

.ha-edition-server .ha-edition-art {
    background: linear-gradient(165deg, var(--accent-50) 0%, var(--surface) 100%);
}

.ha-edition-art img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-inline: auto;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.ha-edition:hover .ha-edition-art img { transform: translateY(-3px) scale(1.015); }

.ha-edition-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.6rem 1.75rem 1.75rem;
}

body.marketing .ha-edition-body h3 { font-size: 1.35rem; }

/* ======================================================== home: pricing */

body.marketing .home-pricing {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.home-pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(30rem 18rem at 10% 20%, var(--brand-50) 0%, transparent 70%),
        radial-gradient(26rem 16rem at 92% 70%, var(--accent-50) 0%, transparent 70%);
    pointer-events: none;
}

.home-pricing > .container { position: relative; }

.home-pricing-art {
    display: block;
    width: 116px;
    height: auto;
    margin: 0 auto .75rem;
}

body.marketing .home-pricing .plan-card { box-shadow: var(--shadow-sm); }

/* ============================================================= shared: CTA */

body.marketing .ha-cta { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.ha-cta-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

body.marketing .ha-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }

/* ================================================================ about */

body.marketing .about-hero {
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.about-hero-art {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-inline: auto;
}

@media (max-width: 991.98px) {
    .about-hero-art { max-width: 360px; }
}

/* --- who it is for ------------------------------------------------------ */

.about-buyer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.about-buyer:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-300);
    border-color: color-mix(in srgb, var(--acc, var(--brand)) 34%, var(--surface));
    transform: translateY(-3px);
}

.about-buyer-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(160deg, var(--acc-soft, var(--brand-50)) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--line-soft);
}

.about-buyer-art img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.about-buyer:hover .about-buyer-art img { transform: translateY(-3px) scale(1.03); }

.about-buyer-body { padding: 1.4rem 1.5rem 1.6rem; }

body.marketing .about-buyer-body h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.about-buyer-body h3::before {
    content: "";
    display: block;
    width: 32px;
    height: 4px;
    margin-bottom: .8rem;
    border-radius: var(--r-pill);
    background: var(--acc, var(--brand));
}

.about-buyer-body p {
    margin: 0;
    font-size: .98rem;
    color: var(--ink-body);
}

@media (min-width: 1200px) {
    .about-buyer { grid-template-columns: 200px minmax(0, 1fr); }

    .about-buyer-art {
        border-bottom: 0;
        border-right: 1px solid var(--line-soft);
    }
}

/* --- how we build it ---------------------------------------------------- */

body.marketing .about-build {
    position: relative;
    background:
        radial-gradient(50rem 24rem at 50% 0%, var(--brand-100) 0%, transparent 70%),
        linear-gradient(180deg, var(--brand-50) 0%, var(--canvas) 100%);
    border-block: 1px solid var(--line);
}

.about-principle {
    height: 100%;
    padding: 1.6rem 1.6rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.about-principle:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-300);
    transform: translateY(-3px);
}

.about-principle-art {
    display: block;
    width: 112px;
    height: auto;
    margin: -.25rem 0 1rem -.35rem;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.about-principle:hover .about-principle-art { transform: translateY(-2px) scale(1.04); }

body.marketing .about-principle h3 {
    font-size: 1.15rem;
    margin-bottom: .6rem;
}

.about-principle p {
    font-size: .97rem;
    color: var(--ink-body);
}

.about-principle p:last-child { margin-bottom: 0; }

.about-principle address {
    font-size: .92rem;
    color: var(--ink-faint);
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}

/* --- editions ----------------------------------------------------------- */

body.marketing .about-editions { background: var(--surface); }

/* ============================================ motion, small screens, print */

@media (max-width: 575.98px) {
    body.marketing .home-trust { padding: 1.15rem 1.1rem; }
    .home-mod-art img { max-width: 184px; }
    .home-step-art img { max-width: 260px; }
    .home-split-body::after { margin-top: 1.1rem; }
    .ha-edition-art { padding-inline: .75rem; }
    .ha-edition-body { padding: 1.35rem 1.25rem 1.5rem; }
    .about-principle { padding: 1.35rem 1.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-split:hover .home-split-media img,
    .home-mod:hover .home-mod-art img,
    .home-steps .step:hover .home-step-art img,
    .ha-edition:hover .ha-edition-art img,
    .about-buyer:hover,
    .about-buyer:hover .about-buyer-art img,
    .about-principle:hover,
    .about-principle:hover .about-principle-art { transform: none; }
}

@media print {
    .home-hero-visual::before,
    .home-split-media::before,
    .home-pricing::before,
    .ha-cta-art { display: none !important; }

    .home-split,
    .about-buyer,
    .about-principle { break-inside: avoid; box-shadow: none; }
}