/* global React, HierarchyPyramid, SummaryTable */
// Read-on-web version of "The Health Hierarchy" — Field Guide No. 02.
// Editorial layout: drop-cap intro, paired pyramid, four layers (each with a
// finance parallel → why the system fails → what Carte does), summary table, close.
// Copy source: uploads/Lead Magnet 2 - The Health Hierarchy v2.md

const LAYERS = [
  {
    n: "01",
    title: "Stop the bleeding",
    lede: "The unresolved significant question, actually answered.",
    finance: "In finance, the reason to pay off high-interest debt first is not that the amounts are usually large. It is that the interest rate is so high that any gains you make elsewhere are dwarfed by the rate at which the debt compounds against you.",
    why: "Health bleeds work the same way. While you are spending time on training and sleep and diet, a specific unresolved medical question &mdash; a debilitating back pain that has never been cleanly explained, a fatigue no one has traced to its actual cause, a chronic condition <em>&ldquo;managed&rdquo;</em> at maintenance rather than making progress, an imaging finding from two years ago that never got its follow-up &mdash; is compounding against you faster than the good work is compounding for you.<br/><br/>The standard system is not built to resolve these questions. It is built to allocate a specific specialist to a specific organ within a fifteen-minute visit. If the answer requires forty-five minutes of thinking, reading the original imaging against the report, or pushing past <em>&ldquo;let&rsquo;s see how it looks in six months,&rdquo;</em> you will not get it inside the standard workflow. No specialist is professionally rewarded for staying with your case past the point their specialty has an answer. So the highest-interest problem stays unresolved &mdash; sometimes for years.",
    carte: "The <b style=\"font-weight:500\">Forensic Review</b> is our product for this layer: fifteen to forty pages of written analysis on your open question, produced over about three weeks, with a defensible recommendation and named next steps. The reviewing physician&rsquo;s role is exactly the one the standard system does not incentivize &mdash; to keep digging until the question is actually resolved, without regard for whose specialty is involved or whether the answer fits inside a fifteen-minute visit.",
  },
  {
    n: "02",
    title: "Automate the maintenance",
    lede: "The appointments, monitoring, and follow-ups that should not depend on you remembering.",
    finance: "Nobody&rsquo;s finances stay on track because they discipline themselves into making transfers every month. They stay on track because they set up autopay &mdash; the important actions have been moved out of the pool of things that require attention and into the pool of things that happen without them.",
    why: "Personal health, in the standard system, is not built this way. Every appointment, follow-up, retest, refill, and open loop from the last consultation depends on you remembering. Follow-ups scheduled for four months happen at fourteen. Labs due at six months never get re-checked. Referrals fall through.<br/><br/>The class of actions where this matters most are individually small but hold the plan together &mdash; the annual eye exam if you have diabetes, the DEXA every couple of years, the medication reconciliation with a physician who reviews the whole list. Missing any single one is not a crisis. Missing several over a decade is how you end up with a preventable outcome. Your PCP sees you twice a year and does not run your calendar between visits. Specialists own the appointment they had, not the interval before the next one. Even concierge practices are built around a few longer appointments a year, not the day-to-day work of closing the loops.",
    carte: "Carte&rsquo;s <b style=\"font-weight:500\">Stewardship</b> engagement includes what is functionally the project-management layer for your care. We hold the calendar. We know when follow-ups are due and we schedule them. We track the open items past appointments generated &mdash; recommendations, referrals, retests &mdash; and close them out. We check labs in real time as they come in, not weeks later. We make sure the recurring maintenance happens on its actual schedule, not on the schedule your memory happens to catch.",
  },
  {
    n: "03",
    title: "Do the boring basics excellently",
    lede: "The equivalent of the diversified index fund; done at the level required to work.",
    finance: "Most of the gains in finance come from a few boring, correct strategies executed consistently.",
    why: "Personal health has the same shape. Most of the alpha in health comes from sleep, strength training, stress management, whole foods, the right medications at the right doses. Two things go wrong. First, most people do not know which of the boring basics matters most in <em>their</em> situation &mdash; the person with a family history of dementia has a different weighting on fatty acids than the person with early prediabetes has on strength training. Second, they do not execute at the level required to get the return. Half-hearted strength training does not build the lean mass; approximate sleep discipline does not produce the cardiometabolic effect. The standard system does not do this because it isn&rsquo;t paid for it &mdash; the payment structure rewards the appointment, not the day-to-day work between appointments.",
    carte: "In the ongoing engagement, we identify the specific basics that would produce the largest delta in <em>your</em> situation &mdash; the ones calibrated to your body, history, and goals, not the generic checklist. We match clients with the personal trainers, chefs, physical therapists, and specialists who do this work excellently, so the daily inputs are as high-quality as the plan. We hold the schedule that keeps the strength training consistent, and we adjust course to make healthy sleep actually happen.",
  },
  {
    n: "04",
    title: "Be strategic on the higher-variance choices",
    lede: "Peptides, panels, and the newer interventions; entered with independent judgment.",
    finance: "In finance, the higher-variance choices sit as a small sleeve of the sophisticated portfolio, entered into only with an information advantage. The people who do well know things the average buyer does not, and say <em>no</em> more often than they say <em>yes.</em> The people who do poorly treat them as the main event and buy whatever the closest salesperson is offering.",
    why: "Personal health has the same dynamic. Cryotherapy. Continuous glucose monitors for people who aren&rsquo;t diabetic. High-dose vitamin infusions. Peptides. Not all of these are worthless &mdash; some are useful in the right situation &mdash; but the right way to enter them, as a small calibrated sleeve with an information advantage, is not how most people enter them. Both ends of the spectrum are wrong: your standard doctor is trained to say <em>no</em> to anything they haven&rsquo;t personally read up on, and won&rsquo;t read up on peptides during a fifteen-minute visit; the longevity clinics are structurally set up to say <em>yes</em> to everything they profit from.",
    carte: "We hold the role of a trusted advisor with information alpha and no product to sell. We do not own facilities. We do not sell supplements. We take no revenue from pharmaceutical companies, device manufacturers, longevity clinics, or wellness brands &mdash; our compensation is entirely from our clients. When you ask whether the peptide is right for you, we tell you what the evidence says for your specific situation: often <em>&ldquo;not yet, but here is what would tell us,&rdquo;</em> or <em>&ldquo;yes, at this dose, monitored this way, discontinued if these markers move.&rdquo;</em> The independence is what makes the judgment worth having.",
  },
];

window.ReadOnWeb = function ReadOnWeb({ author = "Gina Siddiqui, MD" }) {
  return (
    <div style={{ background: "var(--carte-cream)", color: "var(--carte-text)", fontFamily: "var(--carte-font-body)" }}>
      <nav style={{ borderBottom: "1px solid var(--carte-rule-soft)", background: "var(--carte-cream)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 32px", maxWidth: 1080, margin: "0 auto" }}>
          <a href="/" style={{ fontFamily: "var(--carte-font-display)", fontWeight: 500, fontSize: 22, color: "var(--carte-text)", textDecoration: "none" }}>Carte</a>
          <div style={{ fontSize: 12, letterSpacing: "0.04em", color: "var(--carte-text-muted)" }}>
            <a href="/resources/" style={{ color: "inherit", textDecoration: "none" }}>Resources</a>
            <span style={{ margin: "0 8px", opacity: 0.5 }}>/</span>
            <span>Field Guide No. 02</span>
          </div>
          <a href="/the-hierarchy/print/" style={{ color: "var(--carte-text)", textDecoration: "none", fontSize: 13.5, fontWeight: 500, borderBottom: "1px solid var(--carte-accent-green)", paddingBottom: 2 }}>Download PDF</a>
        </div>
      </nav>

      <header style={{ maxWidth: 880, margin: "0 auto", padding: "84px 40px 56px", borderBottom: "1px solid var(--carte-text)" }}>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 28 }}>
          Field Guide &middot; No. 02
        </div>
        <h1 style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 64, lineHeight: 1.04, letterSpacing: "-0.012em", margin: "0 0 28px" }}>
          The Health<br/>Hierarchy
        </h1>
        <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 24, lineHeight: 1.45, margin: "0 0 44px", maxWidth: "34ch" }}>
          A finance-style framework for anyone whose health efforts are not paying off the way they should.
        </p>
        <div style={{ display: "flex", gap: 48, paddingTop: 22, borderTop: "1px solid var(--carte-rule)", fontSize: 12.5, letterSpacing: "0.04em", color: "var(--carte-text-muted)" }}>
          <span><span>By&nbsp;</span><span style={{ color: "var(--carte-text)", fontWeight: 500 }}>{author}</span></span>
          <span>2026.07</span>
          <span>~12 min read</span>
        </div>
      </header>

      {/* Intro */}
      <section style={{ maxWidth: 880, margin: "0 auto", padding: "64px 40px 24px" }}>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 21, lineHeight: 1.62, margin: "0 0 1.1em" }}>
          <span style={{ float: "left", fontFamily: "var(--carte-font-display)", fontSize: 92, lineHeight: 0.85, padding: "8px 14px 0 0", fontWeight: 400 }}>Y</span>
          ou know, quietly, that you should be healthier than you are. You have had the standard tests, and probably some of the more expensive ones. You show up to appointments. But you have an expertise, a business, or a family (or all three) and health has to fit inside a life that includes many other things. You are not trying to turn health into a hobby. You are trying to translate the resources, access, and information you have into outcomes you can actually feel. And you have the quiet sense &mdash; one you&rsquo;ve probably not said out loud, because it doesn&rsquo;t fit with what should be available to you &mdash; that you should be further ahead than you are.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.65, margin: "0 0 1.1em" }}>
          You are not alone in this. It is one of the more common private frustrations of successful adults who are trying to get this right and cannot quite figure out why the returns are not showing up.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.65, margin: "0 0 1.1em" }}>
          Among people with roughly comparable raw material &mdash; genes, income, time, geography &mdash; some end up meaningfully better off than others in both wealth and health, and the difference has almost nothing to do with the individual moves anyone makes on any specific day. It has to do with the architecture.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.65, margin: "0 0 1.1em" }}>
          People in excellent financial health do not, as a rule, just make more money. They do two other things at the same time. They lose money at a lower rate than others &mdash; through debt they avoid, mistakes they don&rsquo;t make, exposures they close down. And they compound their money through habits that are patient, boring, and largely automated. People in excellent health show the same pattern, in the same order.
        </p>
      </section>

      {/* VISUAL 1 — paired pyramid */}
      <section style={{ maxWidth: 880, margin: "0 auto", padding: "24px 40px 20px" }}>
        <div style={{ border: "1px solid var(--carte-rule)", padding: "40px 40px 36px", background: "var(--carte-white)" }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11, fontWeight: 500, color: "var(--carte-text-muted)", marginBottom: 6 }}>Figure 1</div>
          <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 22, lineHeight: 1.3, margin: "0 0 28px", maxWidth: "34ch" }}>Wealth and health flourish in the same four layers.</div>
          <HierarchyPyramid mode="paired" scale={1}/>
        </div>
      </section>

      <section style={{ maxWidth: 880, margin: "0 auto", padding: "8px 40px 24px" }}>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.65, margin: "0 0 1.1em" }}>
          Most of the reason a specific person is not achieving the health they&rsquo;re after is that they are missing one or more of these four layers. And the deeper reason they&rsquo;re missing them is that the standard medical system and the standard health-and-wellness industry, taken together, are not organized to provide them. What follows walks through each layer &mdash; why the standard system doesn&rsquo;t provide it, and what Carte does about it.
        </p>
        <div style={{ borderLeft: "3px solid var(--carte-accent-green)", paddingLeft: 22, margin: "36px 0 12px", fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 17, lineHeight: 1.55 }}>
          &mdash; {author}<br/>
          <span style={{ fontStyle: "normal", fontFamily: "var(--carte-font-body)", fontSize: 12.5, letterSpacing: "0.04em", color: "var(--carte-text-muted)" }}>FOUNDER, CARTE MEDICAL</span>
        </div>
      </section>

      {/* Contents */}
      <section style={{ maxWidth: 880, margin: "0 auto", padding: "44px 40px 56px", borderTop: "1px solid var(--carte-rule)", borderBottom: "1px solid var(--carte-rule)" }}>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 22 }}>The four layers</div>
        <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
          {LAYERS.map((c, i) => (
            <li key={c.n} style={{ display: "grid", gridTemplateColumns: "70px 1fr", gap: 20, padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid var(--carte-rule)", alignItems: "baseline" }}>
              <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", letterSpacing: "0.16em", fontSize: 13, color: "var(--carte-text-muted)" }}>{c.n}</span>
              <a href={`#l-${c.n}`} style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.4, color: "var(--carte-text)", textDecoration: "none" }}>{c.title}</a>
            </li>
          ))}
        </ol>
      </section>

      {/* Layer sections */}
      {LAYERS.map((c) => (
        <article key={c.n} id={`l-${c.n}`} style={{ maxWidth: 880, margin: "0 auto", padding: "80px 40px 60px", borderBottom: "1px solid var(--carte-rule)" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 28, marginBottom: 26 }}>
            <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 12, fontWeight: 500, color: "var(--carte-text-muted)" }}>Layer</span>
            <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", letterSpacing: "0.16em", fontSize: 22, color: "var(--carte-text)" }}>{c.n}</span>
            <span style={{ flex: 1, height: 1, background: "var(--carte-rule)" }} />
          </div>
          <h2 style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 38, lineHeight: 1.18, letterSpacing: "-0.005em", margin: "0 0 14px", maxWidth: "26ch" }}>
            {c.title}
          </h2>
          <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 20, lineHeight: 1.5, color: "var(--carte-text-muted)", margin: "0 0 34px", maxWidth: "44ch" }}>{c.lede}</p>

          <div style={{ borderLeft: "3px solid var(--carte-rule)", paddingLeft: 22, margin: "0 0 32px" }}>
            <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 11, fontWeight: 600, color: "var(--carte-text-muted)", marginBottom: 12 }}>The finance parallel</div>
            <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.62, margin: 0, fontStyle: "italic" }} dangerouslySetInnerHTML={{ __html: c.finance }} />
          </div>

          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 11, fontWeight: 600, color: "var(--carte-text)", marginBottom: 12 }}>Why the standard system doesn&rsquo;t provide it</div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.66, margin: "0 0 36px" }} dangerouslySetInnerHTML={{ __html: c.why }} />

          <div style={{ borderTop: "2px solid var(--carte-accent-green)", paddingTop: 18 }}>
            <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 11, fontWeight: 600, color: "var(--carte-accent-green)", marginBottom: 12 }}>What Carte does about it</div>
            <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.66, margin: 0 }} dangerouslySetInnerHTML={{ __html: c.carte }} />
          </div>
        </article>
      ))}

      {/* VISUAL 2 — summary table */}
      <section style={{ maxWidth: 1000, margin: "0 auto", padding: "80px 40px 64px", borderBottom: "1px solid var(--carte-rule)" }}>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 8 }}>The four layers at a glance</div>
        <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 22, lineHeight: 1.3, margin: "0 0 34px", maxWidth: "40ch" }}>What each layer is, why the standard system leaves it out, and what Carte does about it.</div>
        <SummaryTable scale={1}/>
      </section>

      {/* The architecture */}
      <section style={{ maxWidth: 880, margin: "0 auto", padding: "84px 40px 64px" }}>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 26 }}>The architecture</div>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 22, lineHeight: 1.55, fontStyle: "italic", margin: "0 0 1.1em" }}>
          Four layers. Almost no one has all four. Most people have zero to two, and the returns on their health show up &mdash; or don&rsquo;t &mdash; accordingly.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.65, margin: "0 0 1.1em" }}>
          The medical system is structured to sell you individual services and react to problems as they arise. The wellness industry is structured to sell you products and convert enthusiasm into revenue. Neither is organized to hold the whole picture on your behalf, over time, with independent judgment. That is what Carte is organized to do &mdash; not as an add-on to your care, but as the structural piece that has been missing.
        </p>
      </section>

      {/* Working with Carte */}
      <section style={{ background: "var(--carte-navy-deep)", color: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", padding: "72px 40px" }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, opacity: 0.7, marginBottom: 22 }}>Working with Carte</div>
          <h3 style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 36, lineHeight: 1.2, letterSpacing: "-0.005em", margin: "0 0 24px", maxWidth: "28ch" }}>
            Two entry points, depending on which layers you&rsquo;re missing.
          </h3>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.6, margin: "0 0 8px", opacity: 0.9 }}>
            For a specific unresolved question, the entry point is a <b style={{ fontWeight: 500 }}>Forensic Review</b> ($10,000). For ongoing engagement across all four layers, it is <b style={{ fontWeight: 500 }}>Stewardship</b> ($36,000&nbsp;/&nbsp;year) or, at the higher-intensity tier, <b style={{ fontWeight: 500 }}>MD Directorate</b>.
          </p>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.6, margin: "0 0 36px", opacity: 0.9 }}>
            Your first call with one of our physicians is where we figure out which is the right fit &mdash; and you&rsquo;ll leave it with their read on your case and at least one specific next step, whether you continue with Carte or not.
          </p>
          <a href="/inquire/" className="btn btn-primary on-navy">Tell us what&rsquo;s going on</a>
          <div style={{ marginTop: 40, paddingTop: 22, borderTop: "1px solid rgba(250,250,250,0.18)", fontSize: 12.5, letterSpacing: "0.04em", opacity: 0.7 }}>
            This content is for educational and informational purposes only. It does not constitute medical advice.
          </div>
        </div>
      </section>

      <footer style={{ borderTop: "1px solid var(--carte-rule-soft)", padding: "26px 0 30px", fontSize: 12, color: "var(--carte-text-muted)", letterSpacing: "0.02em", background: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto 14px", padding: "0 40px", fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: "var(--carte-text)" }}>
          <b style={{ fontStyle: "normal", fontWeight: 500, letterSpacing: "0.04em", color: "#6d4f1c", marginRight: 6, textTransform: "uppercase", fontSize: 11 }}>Not for emergencies.</b>
          If you are experiencing a medical emergency, call 911. Content on this website is educational and for informational purposes only. It does not constitute medical advice, and individual medical decisions should always be discussed with your treating physicians.
        </div>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "14px 40px 0", borderTop: "1px solid var(--carte-rule-soft)", display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "space-between", alignItems: "baseline" }}>
          <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.36em", fontSize: 13, fontWeight: 500 }}>Carte Medical</span>
          <span>&copy; 2026 Carte Clinics Inc. &middot; VIRGINIA | CALIFORNIA | NATIONAL ADVISORY</span>
        </div>
      </footer>
    </div>
  );
};
