/* ==========================================================================
   Home page (Figma "Home" 142:22).
   One art-directed scene (.home-stage, Built for Embryology) keeps Figma coordinates on a
   1264 canvas from 1281px up; everything else is flow layout. Below 1281 all sections stack.
   ========================================================================== */
.home {
    --home-sage: #a7c8b6;
    --home-gold: #c7a879;
    --home-gap: var(--mg-section-space); /* vertical rhythm between sections (also read by styles-faq.css) */
    --home-card-shadow: 0 10px 32px -6px rgba(var(--mg-ink-rgb), 0.07);
    --home-info-shadow: 0 0 0 0.404px rgba(var(--mg-sage-rgb), 0.12), 0 1.617px 4.85px -2.425px rgba(var(--mg-ink-rgb), 0.06), 0 8.892px 17.784px -9.701px rgba(var(--mg-ink-rgb), 0.18);
    display: block;
    color: var(--mg-ink);
    font-family: var(--mg-font);
}

:where(.home) :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
    padding: 0;
}

.home ul,
.home ol {
    list-style: none;
}

.home-accent {
    color: var(--mg-green-display);
}

/* Section titles */
.home-title {
    font-size: var(--mg-fs-h2);
    font-weight: 700;
    line-height: var(--mg-lh-h2);
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
}

/* Wordmark inside a heading: one rule for every section.
   Jost's cap-height centre sits on the line-box centre, so centring aligns the wordmark with the caps. */
.home-title--logo,
.home-use__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mg-space-2) var(--mg-space-3);
}

.home-logo {
    display: block;
    flex: none;
    width: auto;
    height: 0.92em; /* letters 28px at the 36px h2; extra room is the genie head */
}

/* Figma-coordinate canvas */
.home-stage {
    position: relative;
    width: 1264px;
    margin-inline: auto;
}

/* ---------- Hero ---------- */
.home-hero {
    --hero-photo-h: 520px;
    position: relative;
    padding: calc(var(--hero-photo-h) - 160px) var(--mg-gutter) 0;
    text-align: center;
}

.home-hero__media {
    position: absolute;
    inset: 0 0 auto;
    height: var(--hero-photo-h);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 38%, transparent 84%), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 38%, transparent 84%), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect;
    pointer-events: none;
}

.home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 30%;
}

.home-hero__inner {
    position: relative;
}

.home-hero__title {
    font-size: var(--mg-fs-h1);
    font-weight: 500;
    line-height: var(--mg-lh-h1);
    letter-spacing: -0.02em;
}

.home-hero__text {
    max-width: 860px;
    margin: var(--mg-space-6) auto 0;
    font-size: var(--mg-fs-body);
    font-weight: 500;
    line-height: var(--mg-lh-body);
    opacity: 0.8;
}

.home-hero__actions {
    display: flex;
    justify-content: center;
    gap: var(--mg-space-8);
    margin-top: var(--mg-space-6);
}

/* Desktop/tablet: text left on a clean background, photo on the right fading out toward the text */
@media (min-width: 1025px) {
    .home-hero {
        display: flex;
        align-items: center;
        min-height: clamp(560px, calc(100vh - var(--mg-header-h)), 720px);
        padding: 0 var(--mg-gutter);
        text-align: left;
    }

    .home-hero__media {
        inset: 0 0 0 auto;
        width: 66%;
        height: auto;
        -webkit-mask-image: linear-gradient(to right, transparent 12%, #000 55%), linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
        mask-image: linear-gradient(to right, transparent 12%, #000 55%), linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
    }

    .home-hero__media img {
        object-position: 72% 35%;
    }

    .home-hero__inner {
        max-width: 640px;
    }

    .home-hero__title {
        white-space: nowrap;
    }

    .home-hero__text {
        max-width: 500px;
        margin: var(--mg-space-6) 0 0;
        font-size: var(--mg-fs-lead);
        line-height: var(--mg-lh-lead);
    }

    .home-hero__actions {
        justify-content: flex-start;
        margin-top: var(--mg-space-8);
    }
}

/* ---------- Built for Embryology ---------- */
/* Canvas = Figma frame minus its empty left 164px (cards 30px narrower so the scene fits 1281px). */
.home-built {
    padding-top: var(--home-gap);
}

.home-built__stage {
    height: 784px;
    margin-top: var(--mg-space-8);
}

.home-built__hand {
    position: absolute;
    left: 864px;
    top: 0;
    width: 400px;
    height: 764px;
    overflow: hidden;
}

.home-built__hand img {
    position: absolute;
    left: 0;
    top: -17.52%;
    width: 100%;
    height: auto;
}

.home-built__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.home-built__card {
    position: absolute;
    width: 600px;
    height: 220px;
}

.home-built__card--1 { left: 156px; top: 32px; --tw: 332px; }
.home-built__card--2 { left: 0; top: 292px; --tw: 372px; }
.home-built__card--3 { left: 216px; top: 552px; width: 596px; --tw: 372px; }

.home-built__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 0 0 36px;
    background: #fff;
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--home-card-shadow);
}

.home-built__name {
    position: relative;
    z-index: 1;
    font-size: var(--mg-fs-h3);
    font-weight: 600;
    line-height: var(--mg-lh-h3);
    letter-spacing: -0.02em;
    color: var(--mg-ink);
    white-space: nowrap;
}

.home-built__num {
    display: inline-block;
    margin-right: 0.35em;
    font-weight: 500;
    color: var(--mg-green-text);
}

.home-built__text {
    position: relative;
    z-index: 1;
    width: var(--tw);
    margin: var(--mg-space-3) 0 0;
    font-size: var(--mg-fs-body);
    font-weight: 400;
    line-height: var(--mg-lh-body);
    color: var(--mg-ink-81);
}

.home-built__media {
    position: absolute;
    display: block;
}

.home-built__media--co2 {
    left: 384px;
    top: 24px;
    width: 200px;
    height: 176px;
    overflow: hidden;
}

.home-built__media--co2 img {
    position: absolute;
    left: -63.52%;
    top: -21.55%;
    width: 233.96%;
    height: 149.54%;
    max-width: none;
}

.home-built__card--2 .home-built__media { left: 448px; top: 16px; width: 88px; height: 192px; }
.home-built__card--3 .home-built__media { left: 480px; top: 12px; width: 88px; height: 192px; }

.home-built__dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--home-gold);
}

.home-built__dot--1 { left: 756px; top: 136px; }
.home-built__dot--2 { left: 600px; top: 384px; }
.home-built__dot--3 { left: 812px; top: 676px; }

/* ---------- Designed for the Realities ---------- */
.home-real {
    padding-top: var(--home-gap);
}

.home-real__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 432px));
    justify-content: center;
    column-gap: var(--mg-space-6);
    width: min(1344px, 100% - 2 * var(--mg-gutter));
    margin: var(--mg-space-8) auto 0;
}

.home-real__media {
    position: relative;
    aspect-ratio: 430 / 371;
    overflow: hidden;
    border-radius: var(--mg-radius-lg);
    background: url('assets/figma/home/sage-gradient.webp') center / cover no-repeat;
}

.home-real__phone {
    position: absolute;
    left: 32.09%;
    top: 4.85%;
    width: 35.81%;
    height: auto;
}

.home-real__item:nth-child(2) .home-real__phone {
    top: 5.66%;
}

.home-real__name {
    margin-top: var(--mg-space-4);
    font-size: var(--mg-fs-h4);
    font-weight: 600;
    line-height: var(--mg-lh-h4);
    letter-spacing: -0.02em;
}

.home-real__text {
    margin-top: var(--mg-space-2);
    font-size: var(--mg-fs-body);
    font-weight: 400;
    line-height: var(--mg-lh-body);
}

/* ---------- Compliance, Automated ---------- */
.home-comp {
    padding-top: var(--home-gap);
}

.home-comp__lead {
    max-width: 720px;
    margin: var(--mg-space-4) auto 0;
    padding-inline: var(--mg-gutter);
    font-size: var(--mg-fs-body);
    font-weight: 300;
    line-height: var(--mg-lh-body);
    text-align: center;
    color: var(--mg-ink);
}

/* Cards in an arc around the phone, in flow: 3-column grid, each card inset from the phone by --arc.
   Rings are decoration behind the grid. */
.home-comp__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: center;
    gap: var(--mg-space-4) var(--mg-space-3);
    width: min(1376px, 100% - var(--mg-gutter)); /* >= half a gutter from each viewport edge */
    margin: var(--mg-space-12) auto 0;
}

.home-comp__rings {
    position: absolute;
    left: calc(50% - 348px);
    top: 72px;
    width: 696px;
    height: 372px;
}

.home-comp__ring {
    position: absolute;
    display: block;
    max-width: none;
}

.home-comp__phone {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    width: 260px;
    height: 568px;
    margin-top: var(--mg-space-20);
    perspective: 1000px;
}

.home-comp__phone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.2));
}

.home-comp__card {
    position: relative;
    grid-column: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    width: min(484px, 100% - var(--arc, 0px));
    margin-right: var(--arc, 0px);
}

.home-comp__card--r {
    grid-column: 3;
    justify-self: start;
    flex-direction: row-reverse;
    margin-right: 0;
    margin-left: var(--arc, 0px);
}

.home-comp__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: var(--mg-space-3) var(--mg-space-4);
    background: #fff;
    border: 0.404px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--home-info-shadow), inset 0 0.404px 0 rgba(255, 255, 255, 0.9);
}

.home-comp__tick {
    flex: none;
    width: var(--mg-space-3);
    height: 1px;
    background: var(--home-sage);
}

.home-comp__icon,
.home-impact__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 0.404px solid #9ccfae;
    border-radius: 50%;
    background: radial-gradient(88.8px 85.2px at 23.68px 17.04px, #fff 0%, #f9fbf9 46%, #edf4ef 100%);
    box-shadow: 0 0 0 2.021px rgba(255, 255, 255, 0.28), 0 6.467px 12.934px -5.659px rgba(38, 96, 62, 0.24),
        inset 0 0.404px 0.808px rgba(255, 255, 255, 0.95), inset 0 -4.042px 8.084px rgba(var(--mg-sage-rgb), 0.16);
}

.home-comp__icon img {
    width: var(--is);
    height: var(--is);
}

/* One size for every small card title on the page (comp, pillars, impact, equipment) */
.home-comp__name,
.home-pillars__name,
.home-impact__name,
.home-use__name {
    font-size: var(--mg-fs-lead);
    font-weight: 600;
    line-height: var(--mg-lh-lead);
}

.home-comp__text,
.home-pillars__text,
.home-impact__text {
    font-size: var(--mg-fs-small);
    font-weight: 400;
    line-height: var(--mg-lh-small);
}

.home-comp__text {
    margin-top: var(--mg-space-1);
}

.home-comp__more {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-1);
    margin-top: var(--mg-space-1);
    font-size: var(--mg-fs-label);
    font-weight: 600;
    line-height: var(--mg-lh-label);
    color: var(--mg-green-text);
    text-decoration: none;
    white-space: nowrap;
}

.home-comp__more img {
    width: 16px;
    height: 12px;
    transition: transform 0.25s var(--mg-ease);
}

.home-comp__more:hover img,
.home-comp__more:focus-visible img {
    transform: translateX(3px);
}

/* ---------- Six Pillars ---------- */
/* Copy + 3x2 card grid on the left, the Figma phone on the right. Title is left-aligned (Figma), on the cards' edge. */
.home-pillars {
    padding-top: var(--home-gap);
}

.home-pillars__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: var(--mg-space-14);
    align-items: center;
    width: min(var(--mg-container), 100% - 2 * var(--mg-gutter));
    margin-inline: auto;
}

.home-pillars .home-title {
    justify-content: flex-start;
    padding-inline: 0;
    text-align: left;
}

.home-pillars__lead {
    max-width: 560px;
    margin-top: var(--mg-space-4);
    font-size: var(--mg-fs-body);
    font-weight: 300;
    line-height: var(--mg-lh-body);
    color: var(--mg-ink);
}

.home-pillars__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: var(--mg-space-4);
    margin-top: var(--mg-space-6);
}

.home-pillars__list > div {
    display: flex;
}

.home-pillars__card {
    flex: 1;
    padding: var(--mg-space-6);
    background: #fff;
    border: 0.404px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--home-info-shadow), inset 0 0.404px 0 rgba(255, 255, 255, 0.9);
}

.home-pillars__name {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-3);
    color: var(--mg-green-text);
}

.home-pillars__icon {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px; /* centres the icon on the 28px first line */
    object-fit: contain;
}

.home-pillars__text {
    margin-top: var(--mg-space-2);
}

.home-pillars__phone {
    position: relative;
    width: 240px;
    height: 520px;
    perspective: 1000px;
}

.home-pillars__screen {
    position: relative;
    display: block;
    width: 240px;
    height: 520px;
    object-fit: cover;
}

.home-pillars__shadow {
    position: absolute;
    left: -56px;
    top: 476px;
    width: 352px;
    height: 72px;
    max-width: none;
}

/* ---------- What you can do ---------- */
.home-feat {
    padding-top: var(--home-gap);
}

.home-feat__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 528px));
    justify-content: center;
    column-gap: var(--mg-space-24);
    width: min(1152px, 100% - 2 * var(--mg-gutter));
    margin: var(--mg-space-8) auto 0;
}

.home-feat__list {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-14);
}

.home-feat__item {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-8);
}

/* Big decorative numerals: display green keeps them >= 3:1 (large text) */
.home-feat__num {
    flex: none;
    width: 80px;
    font-size: 64px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: -0.02em;
    color: var(--mg-green-display);
    font-variant-numeric: tabular-nums;
}

.home-feat__text {
    width: 364px;
    padding-top: var(--mg-space-2);
    font-size: var(--mg-fs-lead);
    font-weight: 400;
    line-height: var(--mg-lh-lead);
}

/* ---------- Where can you use ---------- */
.home-use {
    padding-top: var(--home-gap);
}

.home-use__inner {
    display: grid;
    grid-template-columns: 328px 772px;
    justify-content: center;
    align-items: center;
    column-gap: var(--mg-space-12);
    width: min(1148px, 100% - 2 * var(--mg-gutter));
    margin-inline: auto;
}

.home-use__title {
    justify-content: flex-start;
    font-size: var(--mg-fs-h2);
    font-weight: 700;
    line-height: var(--mg-lh-h2);
    letter-spacing: -0.02em;
}

.home-use__text {
    margin-top: var(--mg-space-6);
    font-size: var(--mg-fs-body);
    font-weight: 300;
    line-height: var(--mg-lh-body);
    color: var(--mg-ink);
}

.home-use__carousel {
    display: grid;
    grid-template-columns: 24px minmax(0, 692px) 24px;
    align-items: center;
    column-gap: var(--mg-space-4);
}

.home-use__arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.25s var(--mg-ease);
}

.home-use__arrow img {
    width: 24px;
    height: 24px;
}

.home-use__arrow--next img {
    transform: rotate(180deg);
}

.home-use__arrow--prev:hover { transform: translateX(-3px); }
.home-use__arrow--next:hover { transform: translateX(3px); }

.home-use__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

.home-use__arrow:focus-visible,
.home-use__track:focus-visible {
    outline: 2px solid var(--mg-green);
    outline-offset: 4px;
    border-radius: var(--mg-radius-sm);
}

.home-use__track {
    display: flex;
    gap: 36px;
    height: 400px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.home-use__track::-webkit-scrollbar {
    display: none;
}

.home-use__slide {
    display: flex;
    flex: 0 0 328px; /* two slides + gap = the 692px track */
    flex-direction: column;
    align-items: center;
    height: 400px;
    padding-top: 68px;
    border-radius: var(--mg-radius-lg);
    background: url('assets/figma/home/use-card-bg.webp') center / cover no-repeat;
    scroll-snap-align: start;
    overflow: hidden;
}

.home-use__slide img {
    width: 260px;
    height: 212px;
    object-fit: contain;
}

.home-use__name {
    margin-top: var(--mg-space-2);
    text-align: center;
}

/* Room photo (no single object to cut out): rounded cover crop; left anchor hides the corner watermark. */
.home-use__slide--photo img {
    object-fit: cover;
    object-position: left center;
    border-radius: var(--mg-radius-md);
}

/* ---------- Impact (Validation / Calibration / Compliance) ---------- */
.home-impact {
    padding-top: var(--home-gap);
}

.home-impact__inner {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 600px);
    justify-content: center;
    gap: var(--mg-space-8) var(--mg-space-14);
    width: min(1176px, 100% - 2 * var(--mg-gutter));
    margin: var(--mg-space-8) auto 0;
}

.home-impact__list {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
}

.home-impact__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: var(--mg-space-5);
    align-items: center;
    padding: var(--mg-space-6);
    background: #fff;
    border: 0.404px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--home-info-shadow), inset 0 0.404px 0 rgba(255, 255, 255, 0.9);
}

.home-impact__icon {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    color: var(--mg-green-display); /* meaningful glyph: >= 3:1 */
    font-size: 28px;
}

.home-impact__text {
    margin-top: var(--mg-space-1);
}

.home-impact__media {
    display: grid;
    place-items: center;
    padding: var(--mg-space-10) var(--mg-space-8);
    background: #000;
    border-radius: var(--mg-radius-lg);
}

.home-impact__media img {
    width: 100%;
    height: auto;
}

/* ---------- Plans ---------- */
/* Bottom padding + .home-faq top padding (styles-faq.css) add up to one --home-gap. */
.home-plans {
    padding: var(--home-gap) var(--mg-gutter) var(--mg-section-space-sm);
}

.home-plans__row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--mg-space-14);
    margin-top: var(--mg-space-8);
}

.home-plans__slot {
    flex: 0 1 384px;
}

/* PDF bullets are longer than the Figma placeholders: all cards 520px min, side cards sit 40px lower. */
.home-plans__slot--free,
.home-plans__slot--pro { margin-top: var(--mg-space-10); }

.home-plan {
    display: block;
    min-height: 520px;
    padding: var(--mg-space-8);
    color: var(--mg-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--mg-border-soft);
    border-radius: var(--mg-radius-card);
    box-shadow: 0 12px 16px rgba(var(--mg-ink-rgb), 0.25);
}

.home-plan--basic {
    background: #9ccfae;
    border: 0;
    box-shadow: 0 24px 24px rgba(var(--mg-ink-rgb), 0.55);
}

.home-plans__more {
    display: flex;
    justify-content: center;
    margin-top: var(--mg-space-12);
}

.home-plan:focus-visible {
    outline: 2px solid var(--mg-green);
    outline-offset: 4px;
}

.home-plan__name {
    font-size: var(--mg-fs-h3);
    font-weight: 600;
    line-height: var(--mg-lh-h3);
    letter-spacing: -0.02em;
}

.home-plan__desc {
    margin: var(--mg-space-2) 0 var(--mg-space-8);
    padding-bottom: var(--mg-space-8);
    border-bottom: 1px solid rgba(var(--mg-ink-rgb), 0.1);
    font-size: var(--mg-fs-body);
    line-height: var(--mg-lh-body);
    color: var(--mg-muted);
}

.home-plan--basic .home-plan__desc {
    color: var(--mg-ink);
    border-bottom-color: var(--mg-ink);
}

.home-plan__list {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
}

.home-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--mg-space-3);
    max-width: 304px;
    font-size: var(--mg-fs-body);
    line-height: var(--mg-lh-body);
    color: rgba(var(--mg-ink-rgb), 0.85);
}

.home-plan--basic .home-plan__list li {
    color: var(--mg-ink);
}

.home-plan__check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px; /* centres on the 24px first line */
    border-radius: 50%;
    background: rgba(var(--mg-green-rgb), 0.12);
}

.home-plan--basic .home-plan__check {
    background: rgba(var(--mg-green-rgb), 0.15);
}

.home-plan__check img {
    width: 12px;
    height: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .home-use__track { scroll-behavior: auto; }
    .home-comp__more img,
    .home-use__arrow { transition: none; }
}

/* ==========================================================================
   1280 and below: stacked layout in the same style.
   ========================================================================== */
@media (max-width: 1280px) {
    .home-stage {
        width: auto;
    }

    .home-title {
        white-space: normal;
        padding-inline: var(--mg-gutter);
    }

    .home-hero {
        --hero-photo-h: 480px;
    }

    /* Built for Embryology */
    .home-built__stage {
        display: flex;
        flex-direction: column;
        gap: var(--mg-space-6);
        width: min(632px, 100% - 2 * var(--mg-gutter));
        height: auto;
        margin-top: var(--mg-space-10);
    }

    .home-built__lines,
    .home-built__dot {
        display: none;
    }

    .home-built__card,
    .home-built__card--3 {
        position: static;
        width: 100%;
        height: auto;
    }

    .home-built__body {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--mg-space-2) var(--mg-space-6);
        padding: 28px;
    }

    .home-built__name {
        grid-column: 1;
        white-space: normal;
    }

    .home-built__text {
        grid-column: 1;
        width: auto;
        margin: 0;
    }

    .home-built__body .home-built__media {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .home-built__body .home-built__media--co2 {
        width: 160px;
        height: 140px;
    }

    .home-built__card--2 .home-built__media,
    .home-built__card--3 .home-built__media {
        width: 80px;
        height: auto;
    }

    .home-built__hand {
        position: relative;
        left: auto;
        top: auto;
        order: 1;
        width: 280px;
        height: 420px;
        margin: var(--mg-space-2) auto 0;
    }

    /* Compliance: phone on top, cards in two columns, icon on the left of every card */
    .home-comp__stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mg-space-4);
        width: min(864px, 100% - 2 * var(--mg-gutter));
        margin-top: var(--mg-space-8);
    }

    .home-comp__rings {
        display: none;
    }

    .home-comp__phone {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        width: 220px;
        height: 420px;
        margin: 0 0 var(--mg-space-4);
        overflow: hidden;
    }

    .home-comp__phone img {
        height: auto;
        object-fit: initial;
        filter: none;
    }

    .home-comp__card,
    .home-comp__card--r {
        grid-column: auto;
        justify-self: stretch;
        align-self: stretch;
        flex-direction: row-reverse;
        width: auto;
        margin: 0;
    }

    .home-comp__body {
        align-self: stretch;
    }

    .home-comp__icon {
        width: 56px;
        height: 56px;
    }

    .home-comp__icon img {
        width: calc(var(--is) * 0.75);
        height: calc(var(--is) * 0.75);
    }

    /* Features */
    .home-feat__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--mg-space-12);
        margin-top: var(--mg-space-12);
    }

    .home-feat__text {
        flex: 1;
        width: auto;
    }

    /* Where can you use */
    .home-use__inner {
        display: flex;
        flex-direction: column;
        gap: var(--mg-space-8);
    }

    .home-use__copy {
        max-width: 560px;
        margin-inline: auto;
        text-align: center;
    }

    .home-use__title {
        justify-content: center;
    }

    .home-use__carousel {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        column-gap: var(--mg-space-3);
        width: 100%;
    }

    /* 44px hit area, 24px glyph */
    .home-use__arrow {
        width: 44px;
        height: 44px;
    }

    .home-use__track {
        gap: var(--mg-space-6);
    }

    .home-use__slide {
        flex-basis: min(328px, 100%);
    }

    /* Plans */
    .home-plans__row {
        gap: var(--mg-space-6);
        margin-top: var(--mg-space-10);
    }

    .home-plan {
        min-height: 0;
        padding: 28px var(--mg-space-6);
    }
}

@media (max-width: 1024px) {
    .home-real__grid {
        grid-template-columns: minmax(0, 480px);
        row-gap: var(--mg-space-10);
    }

    .home-pillars__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--mg-space-12);
        width: min(720px, 100% - 2 * var(--mg-gutter));
    }

    .home-pillars__phone {
        align-self: center;
        width: 220px;
        height: 480px;
    }

    .home-pillars__screen {
        width: 100%;
        height: 100%;
    }

    .home-pillars__shadow {
        left: -48px;
        top: 440px;
        width: 320px;
    }

    .home-impact__inner {
        grid-template-columns: minmax(0, 1fr);
        width: min(640px, 100% - 2 * var(--mg-gutter));
    }

    .home-plans__row {
        flex-direction: column;
        align-items: center;
    }

    .home-plans__slot {
        flex: none;
        width: min(420px, 100%);
    }

    .home-plans__slot--free,
    .home-plans__slot--pro {
        margin-top: 0;
    }

    .home-plans__slot--basic {
        order: -1;
    }
}

@media (max-width: 768px) {
    .home-hero {
        --hero-photo-h: 300px;
        padding-top: 208px;
    }

    .home-hero__actions {
        flex-wrap: wrap;
        gap: var(--mg-space-4);
    }

    .home-built__body {
        grid-template-columns: 1fr;
        padding: var(--mg-space-6);
    }

    .home-built__body .home-built__media {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
    }

    .home-comp__stage {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 44px hit area; the negative margin keeps the card height unchanged */
    .home-comp__more {
        min-height: 44px;
        margin-bottom: -12px;
    }

    .home-feat__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--mg-space-10);
    }

    .home-feat__list {
        gap: var(--mg-space-10);
    }

    .home-feat__item {
        gap: var(--mg-space-5);
    }

    .home-feat__num {
        width: 64px;
        font-size: 48px;
        line-height: 52px;
    }

    .home-feat__text {
        padding-top: var(--mg-space-1);
        font-size: var(--mg-fs-body);
        line-height: var(--mg-lh-body);
    }

    .home-use__carousel {
        column-gap: var(--mg-space-2);
    }

    .home-use__slide {
        height: 340px;
        padding-top: 56px;
    }

    .home-use__slide img {
        width: 220px;
        height: 180px;
    }

    .home-use__name {
        padding-inline: var(--mg-space-3);
    }
}

/* ---------- App screen full view (home.js) ---------- */
.home-zoomable {
    cursor: zoom-in;
}

.home-zoomable:focus-visible {
    outline: 2px solid var(--mg-green);
    outline-offset: 4px;
}

.home-viewer {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: calc(76px + env(safe-area-inset-top)) var(--mg-space-4) calc(24px + env(safe-area-inset-bottom));
    border: 0;
    background: transparent;
    display: none;
    place-items: center;
}

.home-viewer[open] {
    display: grid;
    animation: home-viewer-in 0.35s var(--mg-ease);
}

.home-viewer::backdrop {
    background: rgba(12, 28, 20, 0.9); /* #0C1C14 */
    backdrop-filter: blur(6px);
}

.home-viewer__img {
    max-width: 100%;
    max-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.home-viewer__close {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: var(--mg-space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--mg-space-2);
    height: 44px;
    padding: 0 var(--mg-space-5) 0 var(--mg-space-4);
    border: 0;
    border-radius: var(--mg-radius-pill);
    background: #fff;
    color: var(--mg-ink);
    font: 500 16px/1 var(--mg-font);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--mg-ease), background-color 0.2s ease;
}

.home-viewer__close:hover {
    transform: translateY(-1px);
    background: var(--mg-line);
}

.home-viewer__close:focus-visible {
    outline: 2px solid var(--mg-green);
    outline-offset: 4px;
}

html.home-viewer-open {
    overflow: hidden;
}

@keyframes home-viewer-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .home-viewer[open] { animation: none; }
}

/* Hero split on small laptops: narrower photo so the text never sits on the photo */
@media (min-width: 1025px) and (max-width: 1280px) {
    .home-hero__media {
        width: 58%;
        -webkit-mask-image: linear-gradient(to right, transparent 15%, #000 60%), linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
        mask-image: linear-gradient(to right, transparent 15%, #000 60%), linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
    }

    .home-hero__inner {
        max-width: 500px;
    }

    .home-hero__title {
        white-space: normal;
    }

    .home-hero__text {
        max-width: 440px;
    }
}

/* ---------- Product tour video (after the hero) ---------- */
.home-video {
    padding-top: var(--home-gap);
}

.home-video__frame {
    width: min(1080px, 100% - 2 * var(--mg-gutter));
    margin: var(--mg-space-10) auto 0;
    overflow: hidden;
    background: #eef3ef; /* poster background colour while the frame loads */
    border: 1px solid var(--mg-border-soft);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--home-card-shadow);
}

.home-video__frame video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 600px) {
    .home-video__frame {
        margin-top: var(--mg-space-6);
        border-radius: var(--mg-radius-lg);
    }
}