/* ===========================================================================
   Hero, rebuilt from Figma
   File gSV4KtGZpMu6vyC3mE0B27, page "Website", frame `hero-section` (593:4776).

   The frame is a fixed 1728 x 1117 composition, so the section is one canvas
   with that aspect ratio and every child is placed at its Figma coordinate.
   `--u` is one design pixel expressed in container units, which makes the
   whole scene scale with the viewport and keeps the numbers below readable
   as the numbers the design actually uses.

   The background is the frame's own render (assets/hero/wash.png): the layer
   underneath it carries a Figma shader ("Pattern refraction"), which needs
   WebGPU and the HTML-in-Canvas API and therefore cannot run on a page.
   =========================================================================== */

.fig-hero {
    container-type: inline-size;
    position: relative;
    display: grid;
    /* Top-anchored, not centred: on a tall screen a centred canvas starts far
       down the page and the header, which is its top row, went with it. Any
       leftover height falls below the composition, where the wash carries it. */
    place-items: start center;
    width: 100%;
    min-height: 100svh;
    background: #fff;
    overflow: hidden;
}

/* The frame is wider than it is tall, so on a laptop the height runs out
   before the width does. The canvas therefore takes the smaller of the two
   constraints and keeps the whole composition on screen; the wash behind it
   stays full-bleed, so the narrower canvas never shows as a seam. */
.fig-hero__canvas {
    --fig-w: min(100cqw, calc(100svh * 1728 / 1117));
    position: relative;
    width: var(--fig-w);
    aspect-ratio: 1728 / 1117;
    /* one design pixel */
    --u: calc(var(--fig-w) / 1728);
    /* The canvas is centred across but flush with the top, so a fixed child
       only has to add the horizontal inset back. */
    --fig-x: calc((100cqw - var(--fig-w)) / 2);
    --fig-y: 0px;
    font-family: 'Archivo', system-ui, sans-serif;
}

/* Everything placed from the design's own coordinates. */
.fig-hero__canvas [data-fig] {
    position: absolute;
}

/* ---- background ------------------------------------------------------- */

.fig-hero__wash {
    position: absolute;
    inset: 0;
    background: url('/assets/hero/wash.png') center / cover no-repeat;
    pointer-events: none;
}

/* Rectangle 171: a frosted panel in the bottom right corner. */
.fig-hero__frost {
    position: absolute;
    right: calc(4 * var(--u));
    bottom: calc(6 * var(--u));
    width: calc(426 * var(--u));
    height: calc(544 * var(--u));
    backdrop-filter: blur(calc(9.05 * var(--u)));
    -webkit-backdrop-filter: blur(calc(9.05 * var(--u)));
    pointer-events: none;
}

/* ---- nav -------------------------------------------------------------- */

.fig-hero__logo {
    left: calc(292 * var(--u));
    top: calc(49 * var(--u));
    width: calc(47.841 * var(--u));
    height: calc(40.477 * var(--u));
    display: block;
}

.fig-hero__logo img {
    width: 100%;
    height: 100%;
    display: block;
}

.fig-hero__nav {
    left: calc(651 * var(--u));
    top: calc(57 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(34 * var(--u));
}

.fig-hero__nav a {
    font-family: 'Inter', 'Archivo', system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(16 * var(--u));
    line-height: calc(23.04 * var(--u));
    color: #656565;
    text-decoration: none;
    white-space: nowrap;
}

.fig-hero__nav a:hover {
    color: #212529;
}

.fig-hero__start {
    left: calc(1314 * var(--u));
    top: calc(55 * var(--u));
    width: calc(124.762 * var(--u));
    height: calc(29.522 * var(--u));
    display: block;
    text-decoration: none;
}

/* The frame is named 24x24-icon-arrow-up and the design turns it a quarter
   clockwise, so it reads as "go". Sized to the asset's own 15.53 x 17.79, not
   to the frame, or the 2px stroke is stretched into a fat one. */
.fig-hero__start img {
    position: absolute;
    left: calc(6.995 * var(--u));
    top: calc(5.868 * var(--u));
    width: calc(15.532 * var(--u));
    height: calc(17.786 * var(--u));
    transform: rotate(90deg);
}

.fig-hero__start span {
    position: absolute;
    left: calc(27.762 * var(--u));
    top: calc(6.25 * var(--u));
    width: calc(97 * var(--u));
    text-align: center;
    font-weight: 600;
    font-size: calc(20 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    color: #000;
}

/* ---- the collage: app tiles ------------------------------------------- */

.fig-hero__apps {
    left: calc(1197 * var(--u));
    top: calc(217 * var(--u));
    display: flex;
    gap: calc(9.608 * var(--u));
}

.fig-hero__app {
    position: relative;
    width: calc(74.46 * var(--u));
    height: calc(74.46 * var(--u));
    background: #fff;
    border-radius: calc(17.478 * var(--u));
}

/* Each glyph sits at its own offset inside the tile, exactly as in Figma. */
.fig-hero__app img {
    position: absolute;
    display: block;
}

.fig-hero__app:nth-child(1) img {
    left: calc(16.7 * var(--u));
    top: calc(12 * var(--u));
    width: calc(50.441 * var(--u));
    height: calc(50.442 * var(--u));
}

.fig-hero__app:nth-child(2) img {
    left: calc(12.03 * var(--u));
    top: calc(14.4 * var(--u));
    width: calc(50.441 * var(--u));
    height: calc(45.637 * var(--u));
}

.fig-hero__app:nth-child(3) img {
    left: calc(8.46 * var(--u));
    top: calc(7.2 * var(--u));
    width: calc(57.57 * var(--u));
    height: calc(60.049 * var(--u));
}

.fig-hero__app:nth-child(4) img {
    left: calc(12 * var(--u));
    top: calc(12 * var(--u));
    width: calc(50.44 * var(--u));
    height: calc(50.44 * var(--u));
}

.fig-hero__app:nth-child(5) img {
    left: calc(7.23 * var(--u));
    top: calc(14.4 * var(--u));
    width: calc(60.05 * var(--u));
    height: calc(40.833 * var(--u));
}

/* ---- the collage: Automations pill ------------------------------------ */

.fig-hero__pill {
    left: calc(865 * var(--u));
    top: calc(292 * var(--u));
    width: calc(264.792 * var(--u));
    height: calc(72.534 * var(--u));
    background: #212529;
    border-radius: calc(8 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(7.957 * var(--u));
    padding-left: calc(30.471 * var(--u));
    filter: drop-shadow(
        0 calc(5.739 * var(--u)) calc(5.739 * var(--u)) rgba(108, 117, 125, 0.2)
    );
}

.fig-hero__pill img {
    width: calc(31.828 * var(--u));
    height: calc(31.828 * var(--u));
}

.fig-hero__pill span {
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(27.85 * var(--u));
    line-height: calc(41.774 * var(--u));
    color: #fff;
    white-space: nowrap;
}

/* ---- the collage: avatar + automation card ---------------------------- */

.fig-hero__avatar {
    left: calc(550 * var(--u));
    top: calc(405.492 * var(--u));
    width: calc(56.134 * var(--u));
    height: calc(56.134 * var(--u));
    border-radius: calc(11.227 * var(--u));
    object-fit: cover;
}

.fig-hero__card {
    left: calc(621.851 * var(--u));
    top: calc(401 * var(--u));
    width: calc(397.427 * var(--u));
    height: calc(65.115 * var(--u));
    background: #fff;
    border: calc(0.768 * var(--u)) solid #d9dee2;
    border-radius: calc(11.227 * var(--u));
    filter: drop-shadow(
        0 calc(2.245 * var(--u)) calc(2.245 * var(--u)) rgba(108, 117, 125, 0.1)
    );
}

.fig-hero__card img,
.fig-hero__card span {
    position: absolute;
}

.fig-hero__card-plus {
    left: calc(18.71 * var(--u));
    top: calc(22.454 * var(--u));
    width: calc(20.957 * var(--u));
    height: calc(20.957 * var(--u));
}

.fig-hero__card-msg {
    left: calc(60.6 * var(--u));
    top: calc(17.94 * var(--u));
    font-family: 'Inter', 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: calc(23.576 * var(--u));
    color: #dadfe2;
    white-space: nowrap;
}

.fig-hero__card-gif {
    left: calc(196.093 * var(--u));
    top: calc(19.459 * var(--u));
    font-family: 'Iosevka Charon', ui-monospace, SFMono-Regular, monospace;
    font-size: calc(20.851 * var(--u));
    color: #8e9091;
}

.fig-hero__card-emoji {
    left: calc(249.981 * var(--u));
    top: calc(23.197 * var(--u));
    width: calc(18.726 * var(--u));
    height: calc(18.726 * var(--u));
}

.fig-hero__card-mark {
    left: calc(295.549 * var(--u));
    top: calc(18.432 * var(--u));
    width: calc(31.97 * var(--u));
    height: calc(28.418 * var(--u));
}

.fig-hero__card-send {
    left: calc(354.015 * var(--u));
    top: calc(24.696 * var(--u));
    width: calc(17.013 * var(--u));
    height: calc(17.013 * var(--u));
}

/* ---- the collage: chat input ------------------------------------------ */

.fig-hero__chat {
    left: calc(1061 * var(--u));
    top: calc(436 * var(--u));
    width: calc(637.073 * var(--u));
    height: calc(151.732 * var(--u));
    background: #fff;
    border-radius: calc(27.919 * var(--u));
    box-shadow: 0 calc(1.748 * var(--u)) calc(8.739 * var(--u))
        calc(3.496 * var(--u)) rgba(168, 168, 168, 0.2);
    padding: calc(36.863 * var(--u)) calc(22.41 * var(--u))
        calc(23.624 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(10.357 * var(--u));
    overflow: hidden;
}

.fig-hero__chat-ph {
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(22.129 * var(--u));
    color: #62666b;
    white-space: nowrap;
}

.fig-hero__chat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(51.224 * var(--u));
}

.fig-hero__chat-left,
.fig-hero__chat-right {
    display: flex;
    align-items: center;
}

.fig-hero__chat-left {
    gap: calc(6.403 * var(--u));
}

.fig-hero__chat-right {
    gap: calc(12.806 * var(--u));
}

.fig-hero__chat-btn {
    width: calc(51.224 * var(--u));
    height: calc(51.224 * var(--u));
    display: block;
}

/* Both dropdown pills are laid out from their own measurements rather than
   with flex: the design overlaps glyph and label by a few pixels. */
.fig-hero__chat-pill {
    position: relative;
    height: calc(51.224 * var(--u));
}

.fig-hero__chat-pill > * {
    position: absolute;
}

.fig-hero__chat-pill--ask {
    width: calc(172.079 * var(--u));
}

.fig-hero__chat-pill--model {
    width: calc(153.671 * var(--u));
}

.fig-hero__chat-pill img {
    width: calc(38.418 * var(--u));
    height: calc(38.418 * var(--u));
    top: calc(6.404 * var(--u));
}

/* Figma's 25.61 box is the icon frame; the glyph inside it is 19.90 x 25.38
   and sits at its own offset. Stretching it to the frame widens the stroke. */
.fig-hero__chat-pill .fig-hero__lock {
    width: calc(19.895 * var(--u));
    height: calc(25.385 * var(--u));
    left: calc(32.475 * var(--u));
    top: calc(11.326 * var(--u));
}

.fig-hero__chat-pill span {
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(19.209 * var(--u));
    color: #62666b;
    top: calc(14.409 * var(--u));
    white-space: nowrap;
}

.fig-hero__chat-pill--ask span {
    left: calc(64.476 * var(--u));
}

.fig-hero__chat-pill--ask .fig-hero__chev {
    left: calc(138.464 * var(--u));
}

.fig-hero__chat-pill--model span {
    left: calc(17.608 * var(--u));
}

.fig-hero__chat-pill--model .fig-hero__chev {
    left: calc(102.446 * var(--u));
}

/* The 38.42 box holds its place in the row; the glyph keeps its own size. */
.fig-hero__chat-icon {
    position: relative;
    flex: none;
    width: calc(38.418 * var(--u));
    height: calc(38.418 * var(--u));
}

.fig-hero__chat-icon img {
    position: absolute;
    display: block;
}

.fig-hero__chat-icon--mic img {
    left: calc(8.142 * var(--u));
    top: calc(3.733 * var(--u));
    width: calc(22.144 * var(--u));
    height: calc(29.485 * var(--u));
}

.fig-hero__chat-icon--audio img {
    left: calc(5.601 * var(--u));
    top: calc(4 * var(--u));
    width: calc(25.611 * var(--u));
    height: calc(28.813 * var(--u));
}

.fig-hero__cursor {
    left: calc(1214 * var(--u));
    top: calc(387 * var(--u));
    width: calc(63 * var(--u));
    height: calc(63 * var(--u));
}

/* ---- the claim -------------------------------------------------------- */

.fig-hero__title {
    left: calc(292 * var(--u));
    top: calc(674 * var(--u));
    width: calc(857.925 * var(--u));
    margin: 0;
    font-weight: 700;
    font-size: calc(86.942 * var(--u));
    line-height: calc(93 * var(--u));
    color: #000;
    letter-spacing: normal;
}

.fig-hero__title em {
    font-style: italic;
    font-weight: 500;
}

.fig-hero__title em b {
    font-weight: 500;
    color: #927dd3;
}

.fig-hero__lede {
    left: calc(583 * var(--u));
    top: calc(907 * var(--u));
    width: calc(566 * var(--u));
    margin: 0;
    font-weight: 500;
    font-size: calc(25 * var(--u));
    line-height: calc(30 * var(--u));
    color: #858484;
}

.fig-hero__demo {
    left: calc(292 * var(--u));
    top: calc(917 * var(--u));
    width: calc(258 * var(--u));
    height: calc(73 * var(--u));
    background: #000;
    border-radius: calc(65 * var(--u));
    text-decoration: none;
    filter: drop-shadow(
        0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(140, 137, 137, 0.6)
    );
}

/* Same icon, same quarter turn, one size up (the stroke stays 2px, so the
   asset is its own export rather than the smaller one scaled). */
.fig-hero__demo img {
    position: absolute;
    left: calc(25.629 * var(--u));
    top: calc(25.733 * var(--u));
    width: calc(18.745 * var(--u));
    height: calc(21.536 * var(--u));
    transform: rotate(90deg);
}

.fig-hero__demo span {
    position: absolute;
    left: calc(143 * var(--u));
    top: calc(50% - 12.5 * var(--u));
    transform: translateX(-50%);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(25.6 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    color: #fff;
    white-space: nowrap;
}

.fig-hero__demo:hover {
    filter: drop-shadow(
        0 calc(4 * var(--u)) calc(9 * var(--u)) rgba(140, 137, 137, 0.75)
    );
}

/* ---- phones and small laptops ----------------------------------------- */

/* The composition is built for a wide canvas. Below this width the collage
   would be unreadable at any scale, so the hero keeps the claim, the lede
   and the button and drops the scene. */
@media (max-width: 900px) {
    /* Stacked, so the section is as tall as its content, not as the viewport. */
    .fig-hero {
        min-height: 0;
    }

    .fig-hero__canvas {
        --fig-w: 100cqw;
        aspect-ratio: auto;
        --u: 1px;
        padding: 120px 24px 72px;
    }

    /* Stacked flow instead of the frame's absolute grid. The boxes stay
       positioned (a positioned wash would otherwise paint over static text)
       but drop the frame coordinates so they lay out in document order. */
    .fig-hero__canvas [data-fig] {
        position: relative;
        left: auto;
        top: auto;
        z-index: 1;
    }

    /* The wash stays positioned, so it needs an explicit floor: a positioned
       box otherwise paints over the static text that follows it. */
    .fig-hero__wash {
        position: absolute;
        inset: 0;
        background-size: cover;
        z-index: 0;
    }


    .fig-hero__apps,
    .fig-hero__pill,
    .fig-hero__avatar,
    .fig-hero__card,
    .fig-hero__chat,
    .fig-hero__cursor,
    .fig-hero__frost,
    .fig-hero__logo,
    .fig-hero__nav,
    .fig-hero__signin,
    .fig-hero__start {
        display: none;
    }

    .fig-hero__title {
        width: auto;
        font-size: clamp(38px, 11vw, 60px);
        line-height: 1.07;
    }

    .fig-hero__lede {
        width: auto;
        margin: 20px 0 28px;
        font-size: 17px;
        line-height: 24px;
    }

    /* The whole button at 81 %: 258x73 down to 210x60, with the arrow, the
       label and their offsets scaled by the same factor so it stays the
       Figma button, only smaller. */
    .fig-hero__demo {
        display: inline-block;
        width: 210px;
        height: 60px;
        border-radius: 53px;
    }

    .fig-hero__demo img {
        left: 21px;
        top: 21px;
        width: 15.3px;
        height: 17.5px;
    }

    .fig-hero__demo span {
        left: 116px;
        top: calc(50% - 10.4px);
        font-size: 17px;
        line-height: 20.8px;
        letter-spacing: -0.16px;
    }
}

/* ---- the header ---------------------------------------------------------
   The frame's own top row IS the header: mark, links, "Sign in" and "Start
   free" on their Figma coordinates. They are fixed rather than drawn into the
   canvas, so at the top of the page nothing has moved a pixel, and from the
   first scroll they stay put on a frosted plate. The site's old bar stays off
   on wide screens; below 900 the frame has no top row, so that one takes over
   and carries the burger.

   Every page wears this row, not only the one with the hero: the other pages
   carry the same markup in a `.fig-bar` strip, which hands it the same four
   variables the canvas does (see page.css). That is why the scope below is a
   pair and not the canvas alone, and it is the reason the bar is identical
   from the landing to the terms page rather than merely similar. */

body.has-fig-nav > header#nav {
    display: none;
}

:is(.fig-hero__canvas, .fig-bar) .fig-hero__logo,
:is(.fig-hero__canvas, .fig-bar) .fig-hero__nav,
:is(.fig-hero__canvas, .fig-bar) .fig-hero__signin,
:is(.fig-hero__canvas, .fig-bar) .fig-hero__start {
    position: fixed;
    z-index: 90;
}

:is(.fig-hero__canvas, .fig-bar) .fig-hero__logo {
    left: calc(var(--fig-x) + 292 * var(--u));
    top: calc(var(--fig-y) + 49 * var(--u));
}

:is(.fig-hero__canvas, .fig-bar) .fig-hero__nav {
    left: calc(var(--fig-x) + 651 * var(--u));
    top: calc(var(--fig-y) + 57 * var(--u));
}

/* The account door, in the gap the row already had between the last link and
   the button. Ink, not the links' grey: grey read as a sixth page. No frame
   either, because the row holds exactly one framed thing and that is the
   button beside it. Its right edge lands 52 design px short of the arrow. */
:is(.fig-hero__canvas, .fig-bar) .fig-hero__signin {
    left: calc(var(--fig-x) + 1214 * var(--u));
    top: calc(var(--fig-y) + 57 * var(--u));
}

.fig-hero__signin {
    font-family: 'Inter', 'Archivo', system-ui, sans-serif;
    font-weight: 500;
    font-size: calc(16 * var(--u));
    line-height: calc(23.04 * var(--u));
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
}

.fig-hero__signin:hover {
    color: #656565;
}

:is(.fig-hero__canvas, .fig-bar) .fig-hero__start {
    left: calc(var(--fig-x) + 1314 * var(--u));
    top: calc(var(--fig-y) + 55 * var(--u));
}

/* The glass itself, behind the row: a plate as tall as the row's own band,
   transparent until the page has moved. */
.fig-hero__bar {
    position: fixed;
    /* A pill, not a band: it wraps the row from the mark's left to the
       button's right with 28 design px of air at the sides and 14 above and
       below, so it reads as one floating control the row sits in. Same glass
       as before. */
    left: calc(var(--fig-x) + 264 * var(--u));
    top: calc(var(--fig-y) + 35 * var(--u));
    width: calc(1203 * var(--u));
    height: calc(69 * var(--u));
    border-radius: 999px;
    z-index: 89;
    pointer-events: none;
    opacity: 0;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 6px 24px rgba(18, 16, 22, 0.06);
    transition: opacity 0.35s ease;
}

body.nav-scrolled .fig-hero__bar {
    opacity: 1;
}

/* ---- arrival ------------------------------------------------------------
   The frame builds itself once, in reading order: the wash, the top row, the
   headline, then the collage assembling piece by piece and the cursor last.
   Pure CSS, so it runs even if a script fails, and it never moves anything
   off its Figma coordinate: only opacity and a 16px lift. */

@keyframes fig-rise {
    from { opacity: 0; transform: translateY(calc(16 * var(--u))); }
    to { opacity: 1; transform: none; }
}

@keyframes fig-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fig-hero__wash {
    animation: fig-fade 900ms ease both;
}

.fig-hero__canvas > * {
    animation: fig-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* the glass plate is chrome, not part of the composition's arrival */
.fig-hero__canvas > .fig-hero__bar {
    animation: none;
}

.fig-hero__frost { animation-delay: 60ms; }
.fig-hero__logo { animation-delay: 120ms; }
.fig-hero__nav { animation-delay: 180ms; }
.fig-hero__signin { animation-delay: 210ms; }
.fig-hero__start { animation-delay: 240ms; }
.fig-hero__title { animation-delay: 260ms; }
.fig-hero__lede { animation-delay: 380ms; }
.fig-hero__demo { animation-delay: 460ms; }
.fig-hero__avatar { animation-delay: 560ms; }
.fig-hero__card { animation-delay: 620ms; }
.fig-hero__apps { animation-delay: 700ms; }
.fig-hero__pill { animation-delay: 780ms; }
.fig-hero__chat { animation-delay: 860ms; }

/* the pointer arrives last and drifts in from where it came */
@keyframes fig-cursor-in {
    from { opacity: 0; transform: translate(calc(26 * var(--u)), calc(22 * var(--u))); }
    to { opacity: 1; transform: none; }
}

.fig-hero__cursor {
    animation: fig-cursor-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 980ms both;
}

@media (prefers-reduced-motion: reduce) {
    .fig-hero__wash,
    .fig-hero__canvas > *,
    .fig-hero__cursor {
        animation: fig-fade 300ms ease both;
        animation-delay: 0ms;
    }
}

/* ---- phones: the site's own bar is the header --------------------------- */

@media (max-width: 900px) {
    .fig-hero__bar {
        display: none;
    }

    /* The same floating pill the wide layout wears, at phone size: inset from
       the gutter, fully round, glass. A full-width white band laid a hard
       edge across the hero's wash and read as a different site's header. The
       inner padding brings the mark onto the 24px gutter the sections use. */
    body.has-fig-nav > header#nav {
        display: flex;
        inset: 10px 8px auto 8px;
        height: 56px;
        padding: 0 8px 0 16px;
        border-radius: 999px;
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.58);
        -webkit-backdrop-filter: blur(20px) saturate(1.7);
        backdrop-filter: blur(20px) saturate(1.7);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
        /* The height is what opens, and `interpolate-size` is what lets it
           travel to `auto`. The corner is NOT transitioned: morphing 999 to 28
           over a third of a second read as the pill deforming into a box. It
           squares off in the first frame, while it is still bar-sized, and
           then the sheet grows out of it. */
        interpolate-size: allow-keywords;
        /* Closing, the corner waits until the sheet is nearly shut before it
           snaps back to the pill: changed at once it would round a still-tall
           box into a blob for a few frames. Opening (the rule below) has no
           delay, so it squares off while it is still bar-sized. */
        transition: box-shadow 0.35s ease,
            height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            border-radius 1ms linear 260ms;
    }

    body.has-fig-nav.nav-scrolled > header#nav {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset,
            0 6px 24px rgba(18, 16, 22, 0.08);
    }

    /* Opened, the pill becomes a panel: still rounded, still inset. The
       height has to be released here, not only in site.css: this selector is
       the more specific one and its `height: 56px` would otherwise hold the
       box shut while the menu spilled out of it. */
    body.has-fig-nav.nav-open > header#nav {
        height: auto;
        border-radius: 26px;
        transition: box-shadow 0.35s ease,
            height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            border-radius 1ms linear;
        padding-bottom: 18px;
        /* Opaque. Glass is right for a bar sitting on the hero; over a sheet
           this tall the hero's own black CTA read through even at 96% and sat
           between the two buttons like a third one. */
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 0 0 1px var(--line-soft), 0 18px 50px -20px rgba(18, 16, 22, 0.25);
    }

    /* The two buttons carry the variants the old tinted hero needed: a glass
       outline and the violet gradient. Inside a white sheet they are the only
       saturated thing on the page and the outline washes out. They take the
       page's own button language instead: ink for the primary, a hairline for
       the secondary. */
    body.nav-open .nav-cta #nav-trial {
        background: var(--ink);
        background-image: none;
        border-color: transparent;
        color: #fff;
        font-weight: 500;
    }

    body.nav-open .nav-cta #nav-trial:hover {
        background: #2E2E35;
        background-image: none;
        box-shadow: none;
    }

    body.nav-open .nav-cta #nav-signin {
        background: #fff;
        border-color: var(--line);
        color: var(--ink);
        font-weight: 500;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.nav-open .nav-cta #nav-signin:hover {
        background: #F4F2F8;
        background-image: none;
        border-color: var(--line);
        color: var(--ink);
    }

    /* The links and the buttons live inside .nav-pill, which is a block here,
       so the burger is a sibling of the whole stack and centres itself
       against it. It belongs on the first line, beside the mark. */
    body.nav-open .nav-logo,
    body.nav-open .nav-burger { height: 56px; }
    body.has-fig-nav.nav-open > header#nav .nav-burger { align-self: flex-start; }
    /* and the stack takes the width the burger leaves, or the links and the
       buttons sit in a column half the panel wide */
    body.has-fig-nav.nav-open > header#nav .nav-pill { flex: 1; min-width: 0; }

    /* the rows come in behind the opening edge, so the eye follows the sheet
       rather than the corner */
    body.has-fig-nav.nav-open > header#nav .nav-links > li,
    body.has-fig-nav.nav-open > header#nav .nav-cta > * {
        animation: nav-row-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    body.has-fig-nav.nav-open > header#nav .nav-links > li:nth-child(1) { animation-delay: 60ms; }
    body.has-fig-nav.nav-open > header#nav .nav-links > li:nth-child(2) { animation-delay: 95ms; }
    body.has-fig-nav.nav-open > header#nav .nav-links > li:nth-child(3) { animation-delay: 130ms; }
    body.has-fig-nav.nav-open > header#nav .nav-links > li:nth-child(4) { animation-delay: 165ms; }
    body.has-fig-nav.nav-open > header#nav .nav-links > li:nth-child(5) { animation-delay: 200ms; }
    body.has-fig-nav.nav-open > header#nav .nav-cta > *:nth-child(1) { animation-delay: 235ms; }
    body.has-fig-nav.nav-open > header#nav .nav-cta > *:nth-child(2) { animation-delay: 270ms; }

    @keyframes nav-row-in {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        body.has-fig-nav > header#nav { transition-duration: 0.01ms; }
        body.has-fig-nav.nav-open > header#nav .nav-links > li,
        body.has-fig-nav.nav-open > header#nav .nav-cta > * { animation: none; }
    }

    .nav-logo .brand-lockup { font-size: 21px; }
}