{% extends "base.html" %}
{% block bodyclass %}page-landing{% endblock %}
{% block content %}
{% include "_beta_banner.html" %}
<main class="hero">
  <div class="hero-inner">
    {% if request.args.get("deleted") == "1" %}
    {# The note is read from ?deleted=1, then the address bar is set to
       plain "/" (#884 G7): a reload or a shared link does not repeat it. #}
    <script>history.replaceState(null, "", "/");</script>
    <p class="inline-msg deleted-note" role="status">Your account is deleted. The records behind every connection were deleted first. We keep a log of who looked at your records, with no health details in it.</p>
    {% endif %}
    {# One headline about what it does for a patient, one button. Nothing on
       this page names a safety grade, a sign-in method or the engine: those
       are ours to care about, not the reader's (design language, 2026-10). #}
    <h1>Understand your health records, in plain words.</h1>
    <p class="sub">
      A health assistant you can message. It reads your records, tells you
      what they say, and asks you before it does anything.
    </p>
    <div class="cta-row">
      {% if me %}
        <a class="btn-primary" href="/home">Go to your hub</a>
      {% else %}
        <a class="btn-primary" href="/auth">Get started</a>
        {# After sign-out this page is where a returning tester lands, and
           "Get started" read as sign-up only (patient walk 2026-10-18).
           Beside the button, so it is above the fold in an in-app
           browser (375x560). #}
        <span class="cta-note">Been here? <a href="/auth">Sign in</a></span>
      {% endif %}
      <span class="cta-note">Start with made-up records. No real ones needed.</span>
    </div>
  </div>
</main>

<section class="how" aria-label="What it does">
  <ol class="steps">
    <li>
      <span class="step-n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20V3.5Z"/><path d="M14 3.5V8h4M10 12h5M10 15.5h5"/></svg></span>
      {# The provider-login clause is gone rather than made conditional: this
         page is public, gets no account, and so cannot resolve the
         CARE_REAL_RECORDS switch that decides whether those logins are open. #}
      <h3>Reads your records</h3>
      <p>Sign in with your email and try it on made-up records.
      Connecting your own records comes later in the beta. Your name and
      details are taken out before it reads them.</p>
    </li>
    <li>
      <span class="step-n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5Z"/></svg></span>
      <h3>Explains them plainly</h3>
      <p>Ask what your labs say or which screenings are due. Answers come
      from your records, in everyday words, never made up.</p>
    </li>
    <li>
      <span class="step-n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      <h3>Asks before it does anything</h3>
      <p>It can fill in a new-patient form from your records. You check every
      medication and allergy yourself, and nothing is sent until you say so.</p>
    </li>
  </ol>
</section>

<section class="honesty">
  <div class="honesty-card">
    {# The one plain explanation of the safety model on the marketing page
       (#876). Tester-facing screens do not use these words at all. #}
    <h3>How it keeps you safe</h3>
    <p>Every time it looks at a record, that is logged. Your records are kept
    apart from everyone else's, and nothing goes out without your OK. The
    open-source layer underneath
    (<a href="https://healthclaw.io" target="_blank" rel="noopener">HealthClaw</a>)
    checks itself on each of these every day, in public.
    <a href="/safety">See today’s grade</a>.</p>
  </div>
</section>
{% endblock %}