@layer components {

  /* ─── Page basics ─────────────────────────── */

  /* The layout's footer (© faktura.to) is hidden — the landing page has its own. */
  body.home-body > footer {
    display: none;
  }

  /* The page alternates between the two light surfaces, as the design does:
     a plain section shows the white one through from the body, and each
     full-bleed band paints the canvas edge to edge. The background belongs on
     the body and not on `.home-page`: a band bleeds through a `z-index: -1`
     pseudo-element, which the page's own background would paint over.

     The header is two rows here, so the page reserves both: the layout's
     `padding-block-start` allows for one bar and would leave the hero under
     the pages' row. Anything that clears the header — this padding, a
     section's scroll margin — reads the sum. */
  body.home-body {
    /* The pages' row, and so the height to clear, belongs to the wide
       display: on a phone the burger carries the pages and the bar stands
       alone. The hairline between the rows counts too, or the bar would sit a
       pixel over the hero. */
    --home-pages-block-size: 0px;
    --home-header-block-size: calc(var(--nav-height) + var(--home-pages-block-size));

    @media (width >= 768px) {
      --home-pages-block-size: calc(2.75rem + 1px);
    }

    background: var(--color-surface);
    padding-block-start: var(--home-header-block-size);
  }

  /* Keeps the full-bleed backgrounds from overflowing sideways (without
     affecting the fixed header). Clipped on the root too, so the overflowing
     pseudo-backgrounds can never open a horizontal scroll. */
  html:has(body.home-body),
  body.home-body {
    overflow-x: clip;
  }

  /* Smooth scroll for the menu's anchor links (Features / How it works /
     Pricing). The sections carry `scroll-margin-top` so the fixed header
     doesn't cover them. */
  @media (prefers-reduced-motion: no-preference) {
    html:has(body.home-body) {
      scroll-behavior: smooth;
    }
  }

  .home-page {
    color: var(--color-ink);
    font-size: 1rem;
  }

  /* Purple accent text in headings */
  .home-accent {
    color: var(--color-brand);
  }

  .home-accent--light {
    color: var(--color-brand-inverted);
  }

  .home-check {
    color: var(--color-brand);
    font-weight: 700;
    margin-inline-end: 0.25rem;
  }

  .home-check--light {
    color: var(--color-brand-inverted);
  }

  /* ─── Full-bleed bands ──────────────────────
     The section stays inside the centred `main` (the content does NOT move,
     so nothing gets clipped); an absolute ::before behind it paints the
     full-width background.

     A band names its colour in `--home-bleed-background` and the pseudo-element
     is the only thing that paints it. Setting `background` on the section too
     and reading it here with `inherit` drew the same colour twice, in two
     layers whose edges meet at the section's own box; on a display whose
     device pixels do not line up with that edge the seam showed as a hairline
     down both sides of the band.

     The fallback lives in the `var()` rather than as a declaration on
     `.home-bleed`: a band styled from another file (`home-efaktura.css`,
     `home-faq.css`) sets the variable at the same specificity, and Propshaft
     serves the files in alphabetical order, so a default here would have
     silently won over the two that sort before this one. */

  .home-bleed {
    position: relative;
  }

  .home-bleed::before {
    background: var(--home-bleed-background, transparent);
    content: "";
    inset: 0 calc(50% - 50vw);
    position: absolute;
    z-index: -1;
  }

  .home-bleed__container {
    inline-size: 100%;
    margin-inline: auto;
  }

  /* ─── Swipe rows ────────────────────────────
     A set of equal cards laid side by side for a thumb, where a phone would
     otherwise scroll past a tall stack of them. The row reaches the screen's
     edges so a card's neighbour peeks in and says there is more; the gutter
     comes back as padding, which keeps the first card in line with the words
     above it, and as scroll padding, which keeps it there once snapped. The
     grid a block declares for wider displays is untouched. */

  .home-swipe {
    @media (width < 768px) {
      grid-auto-columns: min(78%, 19rem);
      grid-auto-flow: column;
      margin-inline: calc(-1 * var(--gutter));
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;

      > * {
        scroll-snap-align: start;
      }
    }
  }

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

  /* ─── Header ──────────────────────────────── */

  /* The bar's own row (`.nav-container`): the logo at the start, the person and
     the sign-up at the end, and on a phone the burger after them. The gap is
     what stands between those groups. */
  .home-header__container {
    gap: 1rem;

    @media (width >= 1024px) {
      gap: 1.5rem;
    }
  }

  /* ─── The pages' row ──────────────────────── */

  /* Ruled off from the row above and a shade quieter, so the two read as
     identity and chrome rather than as one crowded bar. On a phone the row
     scrolls sideways instead of wrapping: six names never fit, and wrapping
     would push the page down by a line. */
  .home-header__pages {
    border-block-start: 1px solid var(--color-glass-edge);
    display: none;

    @media (width >= 768px) {
      display: block;
    }
  }

  /* The row does NOT scroll: a menu hanging off one of these headings is
     positioned out of the row, and a scroll container would clip it away.
     The six headings fit from the tablet width up, which is the narrowest
     width the row is shown at. */
  .home-header__pages .home-header__pages-row {
    block-size: var(--home-pages-block-size);
    gap: 1.5rem;

    @media (width >= 1024px) {
      gap: 2rem;
    }
  }

  /* A page in the row, whether it is a link or the summary that opens a menu:
     both look and behave the same, so the row reads as one set of choices. */
  .home-header__page {
    align-items: center;
    color: var(--color-ink-secondary);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.25rem;
    line-height: 1;
    list-style: none;
    text-decoration: none;
    white-space: nowrap;
  }

  .home-header__page::-webkit-details-marker {
    display: none;
  }

  .home-header__page:hover {
    color: var(--color-brand);
  }

  .home-header__page-chevron {
    color: var(--color-ink-faint);
    transition: transform 0.15s ease;
  }

  .home-header__page:hover .home-header__page-chevron {
    color: var(--color-brand);
  }

  /* The menu a heading opens. It hangs off the heading, so the heading is what
     the drop is positioned against. */
  .home-header__page-menu {
    position: relative;
  }

  .home-header__page-menu[open] .home-header__page,
  .home-header__page-menu[open] .home-header__page-chevron {
    color: var(--color-brand);
  }

  .home-header__page-menu[open] .home-header__page-chevron {
    transform: rotate(180deg);
  }

  .home-header__page-drop {
    animation: home-menu-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: calc(-1 * 0.5rem);
    min-inline-size: 14rem;
  }

  /* The ways in sit at the end of the upper row. From the tablet width the bar
     names them itself — sign in, the accountant's own way, the sign-up button
     and the gear; on a phone it keeps the button and the burger, and the two
     ways in are the foot of the burger's sheet. The two switches hang under
     the gear from the tablet width and in that same foot below it, so each is
     on the page twice and exactly one of the two is ever shown. */
  .home-header__actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-inline-start: auto;

    @media (width >= 1024px) {
      gap: 1rem;
    }
  }

  /* The gear is the wide bar's own: on a phone its two switches are in the
     sheet instead, so a second way to them would be a second copy. */
  @media (width < 768px) {
    .home-header__settings {
      display: none;
    }
  }

  /* A way in named in the bar: quieter than the button beside it, and on one
     line — the phrase is short, and wrapping it would raise the whole row. */
  .home-header__way {
    color: var(--color-ink-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    @media (width < 768px) {
      display: none;
    }
  }

  .home-header__way:hover {
    color: var(--color-brand);
  }

  /* ─── The phone's two menus ───────────────── */

  /* The burger follows the button rather than claiming the end of the bar for
     itself: the row above already pushes that group right, and a second
     `margin-inline-start: auto` here would split the free space between the
     two and leave the burger in the middle of the bar. */
  .home-header__phone {
    align-items: center;
    display: flex;
    gap: 0.25rem;

    @media (width >= 768px) {
      display: none;
    }
  }

  .home-header__cta {
    font-size: 0.8125rem;
    padding: 0.5625rem 1.25rem;
  }



  /* Both menus are the same button: a `summary` that anchors what it opens. */
  .home-header__menu {
    position: relative;
  }

  .home-header__menu-btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0.5rem;
  }

  .home-header__menu-btn::-webkit-details-marker {
    display: none;
  }

  /* Under the gear: the two switches side by side in a panel pinned to it, as
     the pages' menus are pinned to their own headings. */
  .home-header__switches {
    align-items: center;
    animation: home-menu-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    display: flex;
    gap: 1rem;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    justify-content: space-between;
    padding: 0.75rem;
  }

  /* The pages: a sheet across the screen under the bar,
     rather than a panel hanging off the button — there are seven rows to
     read, and a thumb has the whole width to reach them. It is `fixed`, like
     the bar it hangs from, so the page behind it can scroll away. */
  .home-header__sheet {
    animation: home-menu-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    inset-block-start: calc(var(--nav-height) + 0.5rem);
    inset-inline: 0.75rem;
    max-block-size: calc(100dvh - var(--nav-height) - 1.5rem);
    overflow-y: auto;
    padding: 0.75rem;
    position: fixed;
  }

  /* A rule under every row of the sheet's own list, so the rows read as a list
     rather than as floating words. The groups' own pages are inside a row, not
     rows themselves, so they keep clear of it. */
  .home-header__sheet > a.home-header__sheet-item,
  .home-header__sheet > details.home-header__sheet-group {
    border-block-end: 1px solid var(--color-border-subtle);
  }

  /* The foot: the switches, then the two ways in the bar has no room to name.
     Side by side where they fit and stacked where they do not — the English
     accountant's way is half again as long as the Slovak one. */
  .home-header__sheet-foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-start: 0.875rem;
  }

  .home-header__sheet-switches {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-inline: 0.375rem;
  }

  .home-header__sheet-ways {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }

  /* A page of the sheet: the size of a row a thumb aims at, and text rather
     than a link for as long as the page behind it is unwritten. */
  .home-header__sheet-item {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.75rem;
    text-decoration: none;
  }

  .home-header__sheet-item:active {
    background: var(--color-surface-tint);
  }

  /* A heading in the sheet folds its own pages away. The summary is styled as
     any other row of the sheet, so the set reads as one list whichever rows
     happen to be open. */
  .home-header__sheet-group summary.home-header__sheet-item {
    cursor: pointer;
    list-style: none;
  }

  .home-header__sheet-group summary.home-header__sheet-item::-webkit-details-marker {
    display: none;
  }

  .home-header__sheet-group[open] > summary.home-header__sheet-item {
    color: var(--color-brand);
  }

  .home-header__sheet-group[open] > summary .home-header__page-chevron {
    color: var(--color-brand);
    transform: rotate(180deg);
  }

  .home-header__sheet-children {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-block-end: 0.375rem;
  }

  /* A group's own pages, indented under the heading that holds them. The rule
     down the side ties them to it while the group is open. */
  .home-header__sheet-item--child {
    border-inline-start: 2px solid var(--color-border-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.9375rem;
    font-weight: 500;
    margin-inline-start: 0.75rem;
    padding-inline-start: 1rem;
  }


  @keyframes home-menu-in {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* ─── Hero ────────────────────────────────── */

  /* The opening fills the screen under the fixed header — `min-block-size`,
     not `block-size`, so a long headline grows the section instead of
     clipping it. Two columns from the desktop width, the invoice card beside
     the words; stacked below that, card last. */
  .home-hero {
    --home-bleed-background: var(--color-canvas);

    align-items: center;
    display: grid;
    gap: 3rem;
    min-block-size: calc(100dvh - var(--home-header-block-size));
    padding-block: 3rem 4rem;

    @media (width >= 1024px) {
      gap: 4rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      padding-block: 4rem 5rem;
    }
  }

  .home-hero__content {
    max-inline-size: 34rem;
  }

  .home-hero__badge {
    align-items: center;
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.4375rem 0.875rem;
    text-decoration: none;

    &:hover {
      color: var(--color-brand-strong);
    }
  }

  .home-hero__badge-dot {
    background: var(--color-brand);
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    inline-size: 0.375rem;
  }

  .home-hero__title {
    font-size: clamp(2.25rem, 4.4vw, 3.375rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 1.25rem;
    text-wrap: balance;
  }

  .home-hero__text {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 2rem;
    max-inline-size: 32rem;
  }

  .home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .home-hero__reassurance {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 1rem 0 0;
    text-wrap: balance;
  }

  /* On a wide display the drawing leans into the page's own margin — as far as
     there is, never further than 7rem — so the laptop is drawn at a size the
     app on it can be read at. The margin is the viewport's half less the
     content column's, which is why the reach is written as a comparison
     against it rather than as a figure. A scrollbar's width is kept back on
     top of that: `vw` counts the scrollbar and the layout does not, and
     `html` clips what overruns, so without the allowance the laptop's trailing
     edge would be cut off at the width where the margin is narrowest. */
  .home-hero__visual {
    display: flex;
    justify-content: center;

    @media (width >= 1024px) {
      justify-content: flex-end;
      margin-inline-end: max(-7rem, calc(var(--content-max-inline-size) / 2 - 50vw + 1rem));
    }
  }

  /* ─── The devices in the hero ─────────────── */

  /* A laptop with the phone standing at its leading edge: the list of invoices
     on the desk, one invoice in the pocket. The stage takes the pointer and the
     cluster inside it tilts, so the tilt reads off the whole picture and not
     off one device. The laptop is inset from the stage's leading edge by just
     less than the phone's width, which is the room the phone stands in — so
     the pair never reaches over the words beside it. */
  /* The trailing padding is the room the laptop's foot needs: it reaches 5%
     past the lid on either side, and `html` clips what overruns the page, so
     without it the foot would come back trimmed on the right. */
  .home-devices {
    inline-size: 100%;
    max-inline-size: 44rem;
    padding-block-end: 1.5rem;
    padding-inline-end: 4.2%;
    perspective: 1400px;
  }

  .home-devices__set {
    position: relative;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.4s ease;
    will-change: transform;
  }

  /* ─── The laptop ──────────────────────────── */

  /* A device's aluminium is its own colour rather than the palette's — the same
     reasoning that lets a window's three lights quote the operating system.
     Both values are stated, so it reads as metal by day and as metal at night. */
  .home-laptop {
    --home-laptop-bezel: light-dark(#26262e, #14141a);
    --home-laptop-shell: light-dark(#dcdce6, #3c3c46);
    --home-laptop-shell-dark: light-dark(#b0b0be, #22222a);

    margin-inline-start: 19%;
  }

  .home-laptop__lid {
    background: var(--home-laptop-bezel);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-lifted);
    padding: 0.5rem 0.5rem 0.625rem;
  }

  /* The screen sets the scale for what is drawn on it: the app sizes itself in
     `cqi`, so the whole interface grows and shrinks with the lid instead of
     re-laying itself out at every width. */
  .home-laptop__screen {
    aspect-ratio: 16 / 10;
    background: var(--color-canvas);
    border-radius: 0.375rem;
    container-type: inline-size;
    overflow: hidden;
  }

  /* The foot reaches past the lid on either side and keeps the hinge's own dip
     in the middle, which is what reads as a laptop and not as a framed
     picture. */
  .home-laptop__foot {
    background: linear-gradient(180deg, var(--home-laptop-shell), var(--home-laptop-shell-dark));
    block-size: 0.75rem;
    border-end-end-radius: 0.5rem;
    border-end-start-radius: 0.5rem;
    inline-size: 110%;
    margin-inline-start: -5%;
    position: relative;
  }

  .home-laptop__foot::after {
    background: var(--home-laptop-shell-dark);
    block-size: 0.3125rem;
    border-end-end-radius: 0.25rem;
    border-end-start-radius: 0.25rem;
    content: "";
    inline-size: 13%;
    inset-block-start: 0;
    inset-inline-start: 43.5%;
    position: absolute;
  }

  /* ─── The app on the laptop's screen ──────── */

  /* The app is sized in the screen's own units, so this one number scales the
     whole interface with the lid and the layout never breaks into a second
     shape. The bar is set smaller than the page below it — the real bar's
     labels are body size, and at a lid this wide three of them plus the tools
     would not cross it. */
  .home-app {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    font-size: 3.15cqi;
    line-height: 1.35;
  }

  .home-app__bar {
    align-items: center;
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border-subtle);
    display: flex;
    font-size: 0.6em;
    gap: 0.6em;
    padding: 0.85em 1.3em;
  }

  /* The logo is the wordmark itself — the one file the nav and the editor
     draw, which carries the mark in the brand's purple and swaps with the
     theme. Composing it out of the `currentColor` glyph and type drew the
     mark in ink, which is not the logo. */
  .home-app__brand,
  .home-handset__brand {
    aspect-ratio: 204 / 53;
    background: var(--image-wordmark) no-repeat center / contain;
    display: block;
    flex: none;
  }

  .home-app__brand {
    block-size: 1.45em;
    margin-inline-end: 0.3em;
  }

  .home-app__tab {
    align-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    display: flex;
    font-weight: 600;
    gap: 0.4em;
    padding: 0.55em 0.8em;
    white-space: nowrap;
  }

  .home-app__tab--on {
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .home-app__tools {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    gap: 0.7em;
    margin-inline-start: auto;
  }

  .home-app__avatar {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 1.8em;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: flex;
    inline-size: 1.8em;
    justify-content: center;
  }

  /* The page's own inset, which the heading, the button, the toolbar and the
     column heads all read, is in the screen's units rather than in `em`: the
     heads are set much smaller than the rows, and an `em` inset would have
     pulled the two out of line with each other. */
  .home-app__page {
    --home-app-inset: 4.8cqi;

    flex: 1 1 auto;
    padding-block-start: 0.6em;
  }

  .home-app__eyebrow {
    color: var(--color-brand);
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    padding-inline: var(--home-app-inset);
    text-transform: uppercase;
  }

  .home-app__title {
    font-size: 1.45em;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.1em 0 0.3em;
    padding-inline: var(--home-app-inset);
  }

  .home-app__action {
    align-items: center;
    background: var(--color-brand-fill);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: 0.72em;
    font-weight: 600;
    gap: 0.45em;
    margin-inline-start: var(--home-app-inset);
    padding: 0.55em 1.05em;
  }

  /* The dashed rule under the heading runs the screen's full width, as the
     app's own does across the window. */
  .home-app__separator {
    border-block-start: 1px dashed var(--color-border-strong);
    margin-block-start: 0.7em;
  }

  .home-app__toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block: 0.6em 0.45em;
    padding-inline: var(--home-app-inset);
  }

  .home-app__filter {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink-secondary);
    display: inline-flex;
    font-size: 0.62em;
    font-weight: 600;
    gap: 0.4em;
    padding: 0.45em 0.85em;
  }

  .home-app__manage {
    color: var(--color-brand);
    font-size: 0.62em;
    font-weight: 700;
  }

  /* The column heads and the rows are one grid. The number starts the row, the
     total ends it and what is between is centred, the way the app sets them. */
  .home-app__columns,
  .home-app__row {
    align-items: center;
    display: grid;
    gap: 1.6cqi;
    grid-template-columns:
      minmax(0, 1.1fr) minmax(0, 1.65fr) minmax(0, 1.55fr) minmax(0, 1.55fr) minmax(0, 1.35fr);
    padding-inline: 3.2cqi;
    text-align: center;
  }

  .home-app__columns {
    color: var(--color-ink-faint);
    font-size: 0.44em;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-inline: 1.6cqi;
    text-transform: uppercase;
  }

  .home-app__columns span:first-child {
    text-align: start;
  }

  .home-app__columns span:last-child {
    text-align: end;
  }

  .home-app__list {
    background: var(--color-surface);
    border-radius: 0.6em;
    margin-block-start: 0.3em;
    margin-inline: 1.6cqi;
    overflow: hidden;
  }

  .home-app__row {
    font-size: 0.7em;
    padding-block: 0.78em;
  }

  .home-app__row + .home-app__row {
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .home-app__number {
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: start;
  }

  .home-app__client {
    font-weight: 700;
  }

  .home-app__date {
    color: var(--color-ink-secondary);
    font-family: var(--font-mono);
  }

  .home-app__total {
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: end;
  }

  /* ─── The phone ───────────────────────────── */

  /* Standing in front of the laptop, overlapping its leading edge by a sliver:
     enough to read as one picture rather than two, not enough to cover what the
     screen behind it says. It carries the first invoice of the list beside it,
     on the page the app draws for a phone.

     The handset is its own container, so the shell's radii, its bezel and the
     island are all a share of the device's width and the drawing holds its
     proportions at any size. */
  .home-handset {
    container-type: inline-size;
    inline-size: 23%;
    inset-block-end: -0.75rem;
    inset-inline-start: 0;
    position: absolute;
  }

  .home-handset__lid {
    --home-handset-shell: light-dark(#1d1d24, #0c0c10);

    background: var(--home-handset-shell);
    border-radius: 12cqi;
    box-shadow: var(--shadow-lifted);
    padding: 2.4cqi;
    position: relative;
  }

  /* The island floats on the screen with the room above it that a phone's own
     has — it is not a notch cut out of the bezel, so it must not touch the
     device's top edge. */
  .home-handset__island {
    background: var(--home-handset-shell);
    block-size: 7.5cqi;
    border-radius: var(--radius-pill);
    inline-size: 28cqi;
    inset-block-start: 7.5cqi;
    inset-inline-start: 36cqi;
    position: absolute;
    z-index: 1;
  }

  .home-handset__screen {
    aspect-ratio: 9 / 19.5;
    background: var(--color-surface);
    border-radius: 9.5cqi;
    container-type: inline-size;
    overflow: hidden;
  }

  /* Inside the screen the units are the screen's own. The page is longer than
     the screen, as it is on a real phone, so what does not fit is cut off at
     the bottom edge rather than squeezed in. */
  .home-handset__app {
    font-size: 7.4cqi;
    line-height: 1.35;
  }

  /* The bar clears the island: its own height plus the room above it, read in
     the screen's units rather than the device's. */
  .home-handset__bar {
    align-items: center;
    border-block-end: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    padding: 16cqi 1em 0.7em;
  }

  .home-handset__brand {
    block-size: 0.85em;
  }

  .home-handset__tools {
    align-items: center;
    color: var(--color-brand);
    display: flex;
    gap: 0.6em;
  }

  .home-handset__page {
    padding: 1.1em 1em 0;
  }

  .home-handset__back {
    align-items: center;
    color: var(--color-brand);
    display: flex;
    font-size: 0.46em;
    font-weight: 700;
    gap: 0.4em;
    letter-spacing: 0.07em;
    margin: 0;
    text-transform: uppercase;
  }

  .home-handset__title {
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.3em 0 0.65em;
  }

  .home-handset__buttons {
    display: flex;
    gap: 0.4em;
    margin: 0;
  }

  .home-handset__button {
    align-items: center;
    background: var(--color-brand-fill);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: 0.5em;
    font-weight: 700;
    gap: 0.4em;
    padding: 0.7em 0.9em;
    white-space: nowrap;
  }

  .home-handset__button--plain {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
  }

  .home-handset__separator {
    border-block-start: 1px dashed var(--color-border-strong);
    margin-block: 0.9em;
  }

  .home-handset__due {
    background: var(--color-surface-inverted);
    border-radius: 0.55em;
    padding: 0.8em 0.85em 0.75em;
  }

  .home-handset__due-label {
    color: var(--color-ink-inverted-muted);
    display: block;
    font-size: 0.42em;
  }

  .home-handset__due-amount {
    color: var(--color-ink-inverted);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.95em;
    font-weight: 700;
    margin-block: 0.15em 0.2em;
  }

  .home-handset__due-currency {
    color: var(--color-brand-inverted);
  }

  .home-handset__due-date {
    color: var(--color-ink-inverted-muted);
    display: block;
    font-size: 0.42em;
  }

  .home-handset__card {
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.55em;
    margin-block-start: 0.7em;
    padding: 0.7em 0.8em;
  }

  .home-handset__card-title {
    font-size: 0.55em;
    font-weight: 700;
    margin: 0 0 0.6em;
  }

  /* The chosen option carries a filled ring, the other an empty one — the two
     states the app draws a radio in. */
  .home-handset__choice {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.5em;
    gap: 0.6em;
    margin: 0;
  }

  .home-handset__choice + .home-handset__choice {
    margin-block-start: 0.65em;
  }

  .home-handset__choice::before {
    block-size: 1em;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    content: "";
    flex-shrink: 0;
    inline-size: 1em;
  }

  .home-handset__choice--on {
    color: var(--color-ink);
  }

  .home-handset__choice--on::before {
    background: var(--color-brand-fill);
    border-color: var(--color-brand-fill);
    box-shadow: inset 0 0 0 0.2em var(--color-surface);
  }

  .home-handset__field {
    color: var(--color-ink-muted);
    font-size: 0.45em;
    margin: 0 0 0.5em;
  }

  .home-handset__select {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.48em;
    gap: 0.4em;
    margin: 0;
    padding: 0.65em 0.8em;
  }

  .home-handset__select b {
    color: var(--color-ink);
  }

  .home-handset__select .icon {
    margin-inline-start: auto;
  }

  /* ─── The pair on a phone ─────────────────── */

  /* On a phone the laptop would be drawn barely 270px wide, where the app on
     it stops being readable — so the phone shows the phone, the device in the
     reader's own hand, with the room the laptop was taking. */
  @media (width < 768px) {
    .home-laptop {
      display: none;
    }

    .home-devices {
      max-inline-size: 16rem;
      padding-block-end: 0;
      padding-inline-end: 0;
    }

    .home-handset {
      inline-size: 100%;
      position: static;
    }
  }

  /* ─── Trust strip ─────────────────────────── */

  /* Four plain claims on their own band, the last thing before the page
     starts explaining itself. */
  .home-trust {
    --home-bleed-background: var(--color-canvas);
    --home-trust-gap: 2rem;

    padding-block: 1.75rem;
  }

  /* The window the strip runs inside. On a phone it reaches the screen's own
     edges — the page gutter is cancelled — so a claim enters and leaves at the
     edge rather than popping out of thin air. */
  .home-trust__window {
    margin-inline: calc(-1 * var(--gutter));
    overflow: hidden;

    @media (width >= 768px) {
      margin-inline: 0;
      overflow: visible;
    }
  }

  /* The track: the set and its copy, end to end. Half of it is exactly one
     set, so the loop closes on itself — which is why the spacing between
     claims is the set's own trailing padding rather than a `gap` on the
     track, whose last gap would have no counterpart to balance. */
  .home-trust__row {
    display: flex;

    @media (width < 768px) {
      animation: home-trust-run 30s linear infinite;
      inline-size: max-content;
    }
  }

  .home-trust__set {
    display: flex;
    gap: var(--home-trust-gap);
    padding-inline-start: var(--gutter);
    padding-inline-end: calc(var(--home-trust-gap) - var(--gutter));

    /* Wide enough for all four: the copy goes, and the claims spread across
       the band as the design sets it — four equal columns left the short ones
       adrift in the middle of theirs. */
    @media (width >= 768px) {
      flex: 1 1 auto;
      flex-wrap: wrap;
      gap: 0.875rem var(--home-trust-gap);
      justify-content: space-between;
      padding-inline: 0;
    }
  }

  @media (width >= 768px) {
    .home-trust__set + .home-trust__set {
      display: none;
    }
  }

  @keyframes home-trust-run {
    to {
      transform: translateX(-50%);
    }
  }

  /* With motion turned down the reset stops the strip where it stands, so the
     rest of it has to be reachable by thumb instead. */
  @media (prefers-reduced-motion: reduce) and (width < 768px) {
    .home-trust__window {
      overflow-x: auto;
      scrollbar-width: none;
    }

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

  .home-trust__item {
    align-items: center;
    display: flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 0.5rem;
    margin: 0;

    /* Between the phone and the desktop the four claims take two lines: left
       to their own widths they broke three and one. */
    @media (480px <= width < 1024px) {
      flex-basis: calc(50% - 1rem);
    }

    /* On the strip a claim is one unbroken line, as wide as its own words. */
    @media (width < 768px) {
      flex-basis: auto;
      white-space: nowrap;
    }
  }

  .home-trust__check {
    color: var(--color-brand);
    flex-shrink: 0;
  }

  /* ─── Shared section headings ─────────────── */

  .home-section {
    padding-block: 4.5rem;
    scroll-margin-block-start: var(--home-header-block-size);

    @media (width >= 768px) {
      padding-block: 6rem;
    }
  }

  .home-bleed {
    scroll-margin-block-start: var(--home-header-block-size);
  }

  .home-section__eyebrow {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 0.75rem;
    text-align: center;
    text-transform: uppercase;
  }

  .home-section__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 auto;
    max-inline-size: 30rem;
    text-align: center;
    text-wrap: balance;
  }

  /* Two sentences across two lines, balanced — at the shared width the second
     sentence wrapped onto a third. */
  .home-section__title--wide {
    max-inline-size: 36rem;
  }

  .home-section__subtitle {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 1.25rem auto 0;
    max-inline-size: 42rem;
    text-align: center;
  }

  /* ─── Why bother ──────────────────────────── */

  .home-why__cards {
    display: grid;
    gap: 1.25rem;
    margin-block-start: 3rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .home-why-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
  }

  .home-why-card__icon {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 3rem;
    border-radius: var(--radius-md);
    color: var(--color-brand);
    display: flex;
    inline-size: 3rem;
    justify-content: center;
    margin-block-end: 1.25rem;
  }

  .home-why-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
  }

  .home-why-card__text {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
  }

  /* ─── How it works ────────────────────────── */

  .home-steps {
    --home-bleed-background: var(--color-canvas);

    padding-block: 4.5rem;

    @media (width >= 768px) {
      padding-block: 6rem;
    }
  }

  /* Four rows the three steps share, so the drawings, the numbers, the titles
     and the texts each stand on one line across the row. The vertical rhythm
     stays in the parts' own margins, which is why the row gap goes to zero
     here. */
  .home-steps__grid {
    display: grid;
    gap: 2rem;
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;

    /* No gap between the tracks on a phone: each step's own height is the room
       it gets, and a gap would only be dead space between two panels. */
    @media (width < 768px) {
      gap: 0;
    }

    @media (width >= 768px) {
      column-gap: 2rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto auto auto;
      row-gap: 0;
    }
  }

  /* Without this the number under step two sat lower than its neighbours':
     that step's table is a row deeper than the other two drawings, and each
     step was sizing its own parts. */
  .home-step {
    /* On a phone the whole step pins — number, drawing and words together — and
       the next rises over it and pins in turn, so the three read one at a time.
       A sticky element travels only inside its containing block, which here is
       the list, so the scroll each step holds for is the next step's own
       height: nothing is padded out, and the page below stays where it was.
       The later step paints over the earlier by document order, so there is no
       z-index to keep in step.

       Because they overlap, a step has to be opaque and has to show its leading
       edge, or the one beneath reads through it. It carries the band's colour so
       the section still reads as one surface, and the border and rounded corners
       are what you see arrive.

       The shared minimum is what makes the arriving step cover the one below
       exactly: left to their own heights, the taller middle step showed a strip
       of itself under the step that had just covered it. */
    @media (width < 768px) {
      background: var(--color-canvas);
      border-block-start: 1px solid var(--color-border);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      display: flex;
      flex-direction: column;
      inset-block-start: var(--home-header-block-size);
      min-block-size: 23rem;
      padding: 1.5rem 1.25rem 2rem;
      position: sticky;
    }

    @media (width >= 768px) {
      display: grid;
      gap: 0;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }

  /* Each step opens with a drawing of the screen it happens on; the number
     sits under it, where the reading starts. */
  .home-step__screen {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    margin-block-end: 1.5rem;
    min-block-size: 9.25rem;
    padding: 1rem;
  }

  /* The step's head — its number and what that step is called. On a phone the
     two stand on one line and lead the step, so the pinned step says which one
     it is before the drawing. */
  .home-step__head {
    @media (width < 768px) {
      align-items: center;
      display: flex;
      gap: 0.75rem;
      margin-block-end: 1.25rem;
      order: -1;
    }

    /* Two of the list's four rows, so the numbers and the titles each stay on
       one line across the three columns however long a title runs. */
    @media (width >= 768px) {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }

  .home-step__number {
    align-items: center;
    background: oklch(from var(--color-surface-inverted) calc(l - 0.06) c h);
    block-size: 2.5rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    inline-size: 2.5rem;
    justify-content: center;

    /* The head spaces the two on a phone; on a wider display each sits in its
       own row of the list's grid and carries the gap itself. */
    @media (width >= 768px) {
      margin-block-end: 1rem;
    }
  }

  .home-step__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;

    @media (width >= 768px) {
      margin-block-end: 0.5rem;
    }
  }

  .home-step__text {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
  }

  /* Step one: the client search, mid-suggestion. */
  .home-step-search__label {
    margin: 0 0 0.625rem;
  }

  .home-step-search__field {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.625rem;
  }

  .home-step-search__field span {
    color: var(--color-ink);
    font-weight: 600;
  }

  .home-step-search__result {
    align-items: center;
    background: var(--color-brand-tint);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.625rem;
  }

  .home-step-search__name {
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .home-step-search__id {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
  }

  .home-step-search__mark {
    color: var(--color-brand);
    margin-inline-start: auto;
  }

  /* Step two: the lines, adding up. */
  .home-step-items__head,
  .home-step-items__row,
  .home-step-items__total {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) 1.75rem 3.5rem;
    margin: 0;
  }

  .home-step-items__head {
    font-size: 0.625rem;
    padding-block-end: 0.5rem;
  }

  .home-step-items__row {
    border-block-start: 1px solid var(--color-border-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    padding-block: 0.625rem;
  }

  .home-step-items__head > :nth-child(n + 2),
  .home-step-items__row > :nth-child(n + 2) {
    font-family: var(--font-mono);
    font-weight: 400;
    text-align: end;
  }

  .home-step-items__total {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding-block-start: 0.75rem;
  }

  .home-step-items__vat {
    background: var(--color-brand-tint);
    border-radius: var(--radius-xs);
    color: var(--color-brand);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.1875rem 0.375rem;
  }

  .home-step-items__sum {
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
  }

  /* Step three: the document, done — the text is past reading at this size,
     so it is drawn as lines. */
  .home-step__screen--preview {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
  }

  .home-step-preview__paper {
    background: var(--color-canvas);
    border-radius: var(--radius-sm);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-block-size: 7rem;
    padding: 1rem 0.875rem;
  }

  .home-step-preview__line {
    background: var(--color-border);
    block-size: 0.4375rem;
    border-radius: var(--radius-pill);
  }

  .home-step-preview__line--accent {
    background: var(--color-brand);
    inline-size: 70%;
  }

  .home-step-preview__line--short {
    inline-size: 45%;
  }

  .home-step-preview__side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .home-step-preview__status {
    background: var(--color-positive-tint);
    border-radius: var(--radius-xs);
    color: var(--color-positive);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    text-align: center;
  }

  .home-step-preview__pdf {
    align-items: center;
    background: var(--color-brand-fill);
    border-radius: var(--radius-xs);
    color: var(--color-ink-inverted);
    display: flex;
    font-size: 0.625rem;
    font-weight: 700;
    gap: 0.25rem;
    justify-content: center;
    padding: 0.25rem 0.5rem;
  }

  .home-steps__cta {
    display: flex;
    justify-content: center;
    margin-block-start: 3rem;
  }

  /* ─── Features ────────────────────────────── */

  .home-features {
    display: grid;
    gap: 1.25rem;
    margin-block-start: 3rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width >= 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .home-feature {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    gap: 0.875rem;
    padding: 1.25rem;
  }

  .home-feature__icon {
    color: var(--color-brand);
    flex-shrink: 0;
    padding-block-start: 0.125rem;
  }

  .home-feature__title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
  }

  .home-feature__text {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
  }

  /* ─── Who it is for ───────────────────────── */

  .home-audiences {
    --home-bleed-background: var(--color-canvas);

    padding-block: 4.5rem;

    @media (width >= 768px) {
      padding-block: 6rem;
    }
  }

  .home-audiences__cards {
    display: grid;
    gap: 1.25rem;
    margin-block-start: 3rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* The card's link sits at its foot, level across the row however long the
     text above it runs. */
  .home-audience {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    padding: 1.5rem;
    scroll-margin-block-start: calc(var(--home-header-block-size) + 2rem);
  }

  .home-audience__icon {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 3rem;
    border-radius: var(--radius-md);
    color: var(--color-brand);
    display: flex;
    inline-size: 3rem;
    justify-content: center;
    margin-block-end: 1.25rem;
  }

  .home-audience__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
  }

  .home-audience__text {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
  }

  .home-audience__link {
    align-items: center;
    align-self: end;
    color: var(--color-brand);
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.375rem;
    text-decoration: none;
  }

  .home-audience__link:hover {
    gap: 0.625rem;
  }

  /* ─── For accountants ─────────────────────── */

  /* Two columns from the desktop width, the illustration beside the steps;
     stacked below that, illustration last. */
  .home-accountants {
    --home-bleed-background: var(--color-canvas);

    align-items: center;
    display: grid;
    gap: 3rem;

    @media (width >= 1024px) {
      gap: 4rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .home-accountants .home-section__eyebrow {
    text-align: start;
  }

  .home-accountants__title {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
  }

  .home-accountants__text {
    color: var(--color-ink-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 2rem;
  }

  .home-accountants__steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
  }

  .home-accountants__step {
    display: flex;
    gap: 0.875rem;
  }

  .home-accountants__number {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 1.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    display: flex;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    inline-size: 1.75rem;
    justify-content: center;
  }

  .home-accountants__step-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
  }

  .home-accountants__step-text {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
  }

  .home-accountants__ctas {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .home-accountants__login {
    align-items: center;
    color: var(--color-brand);
    display: flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.375rem;
    text-decoration: none;
  }

  .home-accountants__login:hover {
    gap: 0.625rem;
  }

  .home-accountants__visual {
    display: flex;
    justify-content: center;
  }

  .home-accountants__illustration {
    block-size: auto;
    inline-size: 100%;
    max-inline-size: 28rem;
  }

  /* ─── Final call to action ────────────────── */

  .home-final {
    padding-block: 4.5rem;

    @media (width >= 768px) {
      padding-block: 6rem;
    }
  }

  /* One dark card, with the brand's glow bleeding in from the corner. */
  .home-final__card {
    background: oklch(from var(--color-surface-inverted) calc(l - 0.06) c h);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 3.5rem 1.5rem;
    position: relative;
    text-align: center;

    @media (width >= 768px) {
      padding: 4.5rem 3rem;
    }
  }

  .home-final__card::after {
    background: radial-gradient(circle, oklch(from var(--color-brand) l c h / 45%), transparent 70%);
    block-size: 22rem;
    content: "";
    inline-size: 22rem;
    inset-block-end: -11rem;
    inset-inline-end: -6rem;
    pointer-events: none;
    position: absolute;
  }

  .home-final__title,
  .home-final__text,
  .home-final__cta,
  .home-final__note {
    position: relative;
    z-index: 1;
  }

  .home-final__title {
    color: var(--color-ink-inverted);
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 auto 1rem;
    max-inline-size: 34rem;
    text-wrap: balance;
  }

  .home-final__text {
    color: var(--color-ink-inverted-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    max-inline-size: 32rem;
  }

  .home-final__note {
    color: var(--color-ink-inverted-muted);
    font-size: 0.8125rem;
    margin: 1.5rem 0 0;
  }

  /* ─── Footer ──────────────────────────────── */

  .home-footer {
    border-block-start: 1px solid var(--color-border-subtle);
    padding-block: 3rem 2rem;
  }

  .home-footer__top {
    display: grid;
    gap: 2.5rem;

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width >= 1024px) {
      grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
      gap: 2rem;
    }
  }

  .home-footer__brand-text {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 1rem 0 0;
    max-inline-size: 18rem;
  }

  .home-footer__column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .home-footer__title {
    color: var(--color-ink);
    font-weight: 700;
    margin: 0;
  }

  .home-footer__link {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    width: fit-content;
  }

  .home-footer__link:hover {
    color: var(--color-brand);
  }

  .home-footer__bottom {
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin-block-start: 3rem;
    padding-block-start: 1.5rem;
  }

  .home-footer__copyright,
  .home-footer__made {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: 0;
  }

  /* ─── Waiting list ──────────────────────────
     Not on the front page any more: the sign-up puts an address on the list
     itself when registration is closed, so the band went. What is left is the
     form `WaitingListSubscriptionsController` renders in its own response
     (`home/_waiting_list`), which is why these rules stay. */

  .home-waitlist {
    --home-bleed-background: var(--color-surface-inverted);

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0;
    text-align: center;

    @media (width >= 768px) {
      padding: 5rem 0;
    }
  }

  .home-waitlist__title {
    color: var(--color-ink-inverted);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;

    @media (width >= 768px) {
      font-size: 2rem;
    }
  }

  .home-waitlist__text {
    color: var(--color-ink-inverted-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 auto 1.75rem;
    max-inline-size: 440px;
  }

  .home-waitlist__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto 1.5rem;
    max-inline-size: 420px;

    @media (width >= 480px) {
      flex-direction: row;
    }
  }

  .home-waitlist__input {
    background: oklch(from var(--color-ink-inverted) l c h / 8%);
    border-color: oklch(from var(--color-ink-inverted) l c h / 18%);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    flex: 1;
    padding: 0.75rem 1.25rem;
  }

  .home-waitlist__input::placeholder {
    color: var(--color-ink-inverted-muted);
  }

  .home-waitlist__input:focus {
    border-color: var(--color-brand);
  }

  .home-waitlist__submit {
    flex-shrink: 0;
    font-size: 0.875rem;
    padding: 0.75rem 1.375rem;
  }

  .home-waitlist__error {
    color: var(--color-negative);
    font-size: 0.8125rem;
    margin: -0.75rem auto 1.5rem;
    max-inline-size: 420px;
  }

  .home-waitlist__thanks {
    align-items: center;
    color: var(--color-ink-inverted-muted);
    display: flex;
    font-size: 0.9375rem;
    gap: 0.625rem;
    justify-content: center;
    line-height: 1.6;
    margin: 0 auto 1.75rem;
    max-inline-size: 460px;
    text-align: start;
  }

  .home-waitlist__thanks-icon {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 1.5rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8125rem;
    inline-size: 1.5rem;
    justify-content: center;
  }
}