/* Variants */

  .btn:not([data-variant]),

  /* Inverted, not accented. Measured from the reference: its primary control

     is `#e5e5e6` with `#08090a` text -- the page's own background colour used

     as ink -- and no hue at all. `--control-inverse-bg` and

     `--control-inverse-fg` already resolve to that pair, so this is the token

     ladder finally being used where it was always meant to apply. The indigo

     fill was the last saturated element on a monochrome surface. */

  /* A press the finger can feel. Taken from the reference, which scales its

     buttons to .97 on :active. */

  .btn:active:not(:disabled) {

    transform: scale(0.97);

  }

  @media (prefers-reduced-motion: reduce) {

    .btn:active:not(:disabled) {

      transform: none;

    }

  }

  .btn[data-variant="primary"] {

    border-color: var(--accent);

    background: var(--accent);

    color: var(--text-primary);

    border-color: var(--control-inverse-bg);

    background: var(--control-inverse-bg);

    color: var(--control-inverse-fg);

  }

  /* Hover states are gated behind (hover: hover) throughout this pack: on

     visible at rest — so the fallback is simply the resting state, and

     :focus-visible and :active stay ungated. */

  @media (hover: hover) {

    /* Hover brightens toward white rather than shifting hue, which is what the

       reference does (`#e5e5e6` to `#fff`). No halo: a glow around a already

       high-contrast control reads as a focus ring that is not one. */

    .btn:is(:not([data-variant]), [data-variant="primary"]):hover:not(:disabled) {

      border-color: var(--accent-bright);

      background: var(--accent-bright);

      box-shadow: var(--halo);

      color: var(--ink-void);

      border-color: var(--text-ink);

      background: var(--text-ink);

      color: var(--control-inverse-fg);

    }

  }

   * and pins the menu open. Declare no `display` here so the user agent keeps

   * control of open and closed state. Position is app-shell layout. */

  .menu {

    /* Sized by its widest row rather than by its narrowest. */

    min-width: max-content;

    /* A native popover is centred by the user agent's `margin: auto`. Setting

       `margin: 0` defeated that and pinned every menu to the viewport's

       top-left corner -- the account menu included, not just this demo. Keep

    gap: 10px;

    border-bottom: 1px solid var(--line);

    padding: 12px;

    /* Long names still have a ceiling: the menu is a menu, not a card. */

    max-width: 20rem;

  }

  .menu__identity span {

    flex-direction: column;

  }

  /* One line. The panel sizes to its content, and its other rows are short, so

     a two-word name wrapped mid-name and made the identity look like two

     fields. The name is what sets the panel's width now; an unusually long one

     truncates rather than wrapping, since the handle beneath it already

     identifies the account. */

  .menu__identity strong {

    overflow: hidden;

    color: var(--text-primary);

    font-size: 0.8125rem;

    font-weight: 600;

    line-height: 1.25rem;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .menu__identity small {

    font-variant-numeric: tabular-nums;

  }

}

@layer components {

  /* The hero's own light, behind the words rather than behind a figure. Placed

     under the lede and pushed back, so it lifts the headline without washing

     it: the text sits above it at z-index 1 through `.landing-section__inner`. */

  .hero__glow {

    top: 38%;

    z-index: 0;

  }

  /* Two edges of one line. The copyright says who owns this and the note says

     how it is licensed; centring them together reads as one run-on sentence. */

  .landing-footer__bar {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: 8px 24px;

    max-width: 1104px;

    margin-inline: auto;

    padding-block-start: 32px;

  }

  .landing-footer__bar .landing-footer__note {

    padding-block-start: 0;

    margin: 0;

  }

}

  def hero(assigns) do

    ~H"""

    <.section class={["hero", @class]} rule={false}>

      <%!-- The lede's own light. This used to live inside the figure block, so

      commenting the figure out took the glow with it and left the headline

      sitting on flat ink. It belongs to the words. --%>

      <.glow variant={:center} class="hero__glow appear-zoom appear--delay-2" />

      <div class="hero__lede">

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

        <h1 class="hero__title appear">{@title}</h1>

  """

  attr :name, :string, default: "OpenAgents"

  attr :tagline, :string, default: nil

  attr :note, :string, default: nil

  attr :note, :string, default: nil, doc: "shown at the trailing edge of the footer bar"

  attr :copyright, :string, default: nil, doc: "shown at the leading edge"

  attr :class, :any, default: nil

  slot :column, doc: "one column of links" do

          {render_slot(column)}

        </nav>

      </div>

      <p :if={@note} class="landing-footer__note">{@note}</p>

      <%!-- Two edges of one bar rather than a single centred line: the

      copyright is who owns this, the note is how it is licensed, and reading

      them as one sentence makes neither clear. --%>

      <div :if={@copyright || @note} class="landing-footer__bar">

        <p :if={@copyright} class="landing-footer__note">{@copyright}</p>

        <p :if={@note} class="landing-footer__note">{@note}</p>

      </div>

    </footer>

    """

  end

          --%>

        </Landing.hero>

        <Landing.logo_wall title="Built with">

          <:logo>Elixir</:logo>

          <:logo>Phoenix</:logo>

          <:logo>LiveView</:logo>

          <:logo>PostgreSQL</:logo>

        </Landing.logo_wall>

        <Landing.feature_grid title="Everything the work needs. Nothing it doesn't.">

          <:item title="Issues" icon="file-document">

            Plan, assign, label and close, over an API shaped after the one you already

        </Landing.faq>

        <Landing.cta

          title="Start shipping"

          title="Start shipping."

          description="Open an issue and let an agent pick it up."

        >

          <:actions>

        <Landing.landing_footer

          tagline="Purpose-built for planning and shipping issues."

          copyright="© 2026 OpenAgents, Inc."

          note="AGPL-3.0. Every surface here is in the repository."

        >

          <:column title="Product">