/* Homepage (ET-14755).

   The page is assembled entirely from components in main.css, so what belongs here is only what is
   true of this page: the vertical rhythm and the hero, which is the one section built for this page
   alone.

   Everything the previous homepage's markup needed went with that markup -- the hero, the stats
   band, the security grid and the trusted-by strip were all styled against elements this template
   no longer renders.

   On rhythm: the Figma frames stack the sections with no gap between them, because each one's
   padding is inside it. Whoever renders a section's head owns its padding too -- the capability
   section and the CTA band carry their own head and so bring their own padding; the sliders are
   content only, and this page gives them both. */
.home-section {
    padding-block: var(--space-48);
}

@media (min-width: 1200px) {
    .home-section {
        padding-block: var(--space-96);
    }
}

/* ---------- Hero ----------
   Figma: Hero 28571:129326, drawn at 390 / 834 / 1200 / 1600.

   Everything is centred and stacked, and the arrangement does not change across the four screens --
   only the type steps, which the shared layer already does. What does change is that the
   illustration runs to both edges of the viewport, so the hero is not itself a .section; the text
   sits in one, and the illustration is a sibling outside it. */
.home-hero {
    position: relative;
    /* Clips the illustration, which is wider than the viewport by design. No isolation: the wash
       behind the header has to escape this element, so the hero must not open a stacking context. */
    overflow: hidden;
    padding-top: var(--space-40);
}

/* The shared wash (main.css), with the height the homepage frames give it: the Hero frame's own,
   721 / 629 / 900. Its glows are sized against this, so it is the frame's height rather than how
   far the colour visibly reaches. */
.home-wash {
    --page-wash-height: 721px;
}

@media (min-width: 834px) {
    .home-wash {
        --page-wash-height: 629px;
    }
}

@media (min-width: 1200px) {
    .home-wash {
        --page-wash-height: 900px;
    }
}

.home-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
    text-align: center;
}

.home-hero__lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}

/* The pill's outline is an angular gradient that fades out at both caps: violet to coral along the
   top, aqua through teal to blue along the bottom. Figma lays its angular gradients out in the
   frame's unit square, so its stops are converted to this 236x34 pill's real angles below; a much
   longer or shorter label moves the colours slightly along the edges. The 1px edge counts towards
   the size, as the frame's stroke does. It has no fill: measured across the frame, the wash runs
   through the pill unbroken, pink at the left cap and aqua at the right.

   That rules out the usual gradient-border trick, which hides the middle of the gradient under an
   opaque background clipped to the padding box. With no fill to hide it, the ring is drawn on a
   pseudo-element and the middle cut out with a mask instead. The mask has to sit there rather than
   on the pill, because masking an element masks its text too. */
.home-hero__eyebrow {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 6px var(--space-12);
    font-size: var(--body-size-sm-max);
    line-height: var(--body-line-height-sm-max);
    color: var(--brand-violet-600);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
}

.home-hero__eyebrow::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        conic-gradient(from 90deg,
            transparent 0deg,
            var(--brand-blue-500) 13deg,
            var(--brand-teal-500) 150deg,
            var(--brand-aqua-500) 177deg,
            transparent 180deg,
            var(--brand-violet-500) 192deg,
            var(--brand-coral-500) 339deg,
            transparent 360deg) border-box;
    border: 1px solid transparent;
    border-radius: inherit;
    /* Paint the border box, subtract the padding box: what is left is the 1px ring. */
    mask:
        linear-gradient(var(--black), var(--black)) padding-box,
        linear-gradient(var(--black), var(--black));
    mask-composite: exclude;
    pointer-events: none;
}

.home-hero__eyebrow-icon {
    flex-shrink: 0;
    width: var(--icon-xs);
    height: var(--icon-xs);
}

.home-hero__title {
    max-width: 16ch;
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-heading-2xl-size);
    font-weight: var(--heading-weight-2xl);
    line-height: var(--type-heading-2xl-line);
    letter-spacing: var(--type-heading-2xl-track);
    color: var(--black);
    text-wrap: balance;
}

/* Figma draws this on three lines, the longest 831px of the 1312 container. Capping the measure
   reproduces that without hard breaks in the copy, which the frames use and which would survive
   into every other screen. */
.home-hero__description {
    max-width: 860px;
    margin: 0;
    font-size: var(--type-body-xl-size);
    line-height: var(--type-body-xl-line);
    color: var(--black-80);
}

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

/* The frames scale this with the viewport down to 1200 and then stop: at 834 and 390 the artwork is
   the same size it is at 1200 and the viewport simply crops more of it, which is what keeps the
   centre mark the same size on a phone as on a laptop.

   Auto margins cannot centre a box wider than its container -- they resolve to zero and it sits
   against the left edge, which is what left it off-centre. Shifting by half its own width does
   centre it, whatever the overflow. */
.home-hero__visual {
    display: block;
    position: relative;
    left: 50%;
    width: 1200px;
    max-width: none;
    height: auto;
    margin-top: var(--space-40);
    transform: translateX(-50%);
    pointer-events: none;
}

@media (min-width: 1200px) {
    .home-hero {
        padding-top: var(--space-96);
    }

    .home-hero__visual {
        left: auto;
        width: 100%;
        transform: none;
    }
}