text-wrap: balance;

  }

  /* Its own line, always. The second tone is the object of the sentence, and a

     headline that breaks it mid-phrase on one viewport and not another reads

     as a wrap rather than as a decision. */

  .hero__title-muted {

    display: block;

  /* Inline and quiet, ahead of the name it introduces. The word space is a

     margin rather than a literal space in the template: HEEx collapses

     whitespace between an interpolation and its neighbour, so a space typed

     there is not one you can rely on. */

  .hero__title-lead {

    margin-inline-end: 0.25em;

    color: var(--text-muted);

  }

  The figure is a slot rather than an image attribute, so a page can put a live

  surface in the frame instead of a screenshot of one.

  `title_muted` is a second headline line in the muted tier. Two tones over two

  lines is what separates the claim from its object -- the setup is not the

  point, the name is -- and doing it with an attribute keeps the break out of

  the caller's markup, where a `<br>` would fight `text-wrap: balance`.

  `title_lead` is a muted run set inline before the headline. Two tones on one

  line is what separates the setup from the claim -- "Introducing" is grammar,

  the product name is the point -- and putting the quiet half first means the

  eye lands on the name rather than on the word announcing it.

  Below the actions sit three quieter rows, in the order a reader needs them: a

  `command` to run, a `note` qualifying it, and `links` to what the band did

  needs the division, and one whose next band is a figure does not.

  """

  attr :title, :string, required: true

  attr :title_muted, :string, default: nil, doc: "a second headline line, in the muted tier"

  attr :title_lead, :string, default: nil, doc: "a muted run set inline before the headline"

  attr :description, :string, default: nil

  attr :rule, :boolean, default: false, doc: "draw the closing hairline"

  attr :class, :any, default: nil

      <div class="hero__lede">

        <div :if={@eyebrow != []} class="hero__eyebrow appear">{render_slot(@eyebrow)}</div>

        <h1 class="hero__title appear">

          {@title}<span :if={@title_muted} class="hero__title-muted">{@title_muted}</span>

          <span :if={@title_lead} class="hero__title-lead">{@title_lead}</span>{@title}

        </h1>

        <p :if={@description} class="hero__description appear appear--delay-1">

          {@description}

      </div>

      <p class="text-sm text-base-content/60">

        A second headline tone, a command to run, a note qualifying it, and quiet links

        under everything else. The muted line always breaks on its own, so the split

        between the claim and its object is a decision rather than a wrap.

        A muted run ahead of the headline, a command to run, a note qualifying it, and

        quiet links under everything else. Putting the quiet half first means the eye

        lands on the name rather than on the word announcing it.

      </p>

      <div class="demo-frame">

        <Landing.hero

          title="Introducing"

          title_muted="Coder."

          title="Coder."

          title_lead="Introducing"

          description="Your all-in-one coding agent."

        >

          <:eyebrow>

        It closes with a rule rather than running straight into the feature

        grid, so the claim and the way to act on it read as one band. --%>

        <Landing.hero

          title="Introducing"

          title_muted="Coder."

          title="Coder."

          title_lead="Introducing"

          description="Your all-in-one coding agent."

          rule

        >

          <%!-- Commented out rather than deleted, and for the same reason as

          the figure below: the shape is right and what it announces does not

          exist yet. A pill is a link, and one that opens a post nobody has

          written spends the reader's attention and returns none of it.

          Restore it when there is a post to point at.

          <:eyebrow>

            <Landing.announce

              lead="Coder is here"

              navigate={~p"/coder"}

            />

          </:eyebrow>

          --%>

          <:command>

            <Landing.install_command id="home-install-command" command={@install_command} />

          </:command>

          <:note>Every new account starts with $20 of credit.</:note>

          <%!-- Two lines, not one sentence. The first is what the reader gets

          and the second is what it costs them to get it, and running them

          together would let the second read as a condition on the credit

          rather than on the account. --%>

          <:note>

            Every new account starts with $20 of credit.<br />Login with GitHub required.

          </:note>

          <:links>

            <.button navigate={~p"/docs"} variant={:ghost} size={:sm} class="hero__link">