// Public landing page — Land of Enchantment Law subscription plans

const Nav = () => (
  <header style={{
    position: "sticky", top: 0, zIndex: 50,
    background: "rgba(250,246,236,0.85)", backdropFilter: "blur(12px)",
    borderBottom: "1px solid var(--rule)"
  }}>
    <div className="container" style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "16px 0"
    }}>
      <a href="#top" style={{ display: "flex" }}><LogoHorizontal height={32}/></a>
      <nav style={{ display: "flex", gap: 28, alignItems: "center", fontSize: 14 }}>
        <a href="Why Subscription.html" className="nav-a">Why subscription</a>
        <a href="index.html#plans" className="nav-a">Plans</a>
        <a href="Flat-Fee Services.html" className="nav-a">Flat-fee services</a>
        <a href="index.html#how" className="nav-a">How it works</a>
        <a href="index.html#faq" className="nav-a">FAQ</a>
        <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary">
          Book free 15-min intro
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ marginLeft: 6 }}>
            <path d="M2 6 L10 6 M7 3 L10 6 L7 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      </nav>
    </div>
  </header>
);

const Hero = () => (
  <section id="top" style={{ padding: "96px 0 80px", borderBottom: "1px solid var(--rule)" }}>
    <div className="container" style={{ display: "block" }}>
      <div>
        <div className="mono-label" style={{ fontSize: 12, color: "var(--sun)", marginBottom: 24 }}>
          <span className="dot" style={{ marginRight: 10 }}/>SUBSCRIPTION LEGAL · NEW MEXICO
        </div>
        <h1 className="serif" style={{
          fontSize: "clamp(56px, 7.4vw, 112px)", lineHeight: 1.04, letterSpacing: "-0.02em",
          margin: 0, color: "var(--ink)"
        }}>
          Your New Mexico attorney, <em style={{ color: "var(--sun)" }}>on call.</em>
        </h1>
        <p className="serif" style={{
          fontSize: 22, lineHeight: 1.45, fontStyle: "italic",
          color: "var(--ink-soft)", margin: "56px 0 36px", maxWidth: 620
        }}>
          Real legal help, on a flat monthly fee — without the surprise bills, without the hourly meter, without the wait.
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
          <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary lg">
            Book your free 15-minute intro call
          </a>
          <a href="#plans" className="btn-ghost lg">See plans →</a>
        </div>
        <div style={{ marginTop: 36, display: "flex", gap: 28, fontSize: 13, color: "var(--ink-soft)" }}>
          <span>Plans from <strong style={{ color: "var(--ink)" }}>$75/mo</strong></span>
          <span>·</span>
          <span>Albuquerque & Las Cruces</span>
          <span>·</span>
          <span>NM-licensed</span>
        </div>
      </div>
    </div>
  </section>
);

const Stats = () => (
  <section style={{ padding: "56px 0", background: "var(--ink)", color: "var(--cream)" }}>
    <div className="container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 32, alignItems: "center" }}>
      <h2 className="serif" style={{ fontSize: 38, lineHeight: 1.05, margin: 0, color: "var(--cream)" }}>
        We changed the model.
      </h2>
      {[
        { k: "$75", v: "Lowest plan / month" },
        { k: "30-min", v: "Standing call cadence" },
        { k: "24h", v: "Reply time on Premium" }
      ].map(s => (
        <div key={s.v} style={{ borderLeft: "1px solid rgba(245,239,227,0.25)", paddingLeft: 22 }}>
          <div className="numeric" style={{ fontSize: 42, fontWeight: 500, letterSpacing: "-0.02em" }}>{s.k}</div>
          <div style={{ fontSize: 13, marginTop: 6, opacity: 0.75 }}>{s.v}</div>
        </div>
      ))}
    </div>
  </section>
);

const PlansSection = () => (
  <section id="plans" style={{ padding: "96px 0", background: "var(--paper)" }}>
    <div className="container">
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 48 }}>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>01 · FOUR PLANS</span>
        <h2 className="serif" style={{ fontSize: 56, margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
          Pick the one that fits your life.
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
        {PLANS.map((p, i) => (
          <div key={p.key} style={{
            background: i === 2 ? "var(--cream-2)" : "var(--paper)",
            padding: "28px 24px", border: "1px solid var(--rule)",
            display: "flex", flexDirection: "column", gap: 14, position: "relative"
          }}>
            {i === 2 && (
              <span style={{
                position: "absolute", top: -10, right: 16,
                background: "var(--sun)", color: "var(--ink)",
                fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.12em",
                padding: "4px 8px", borderRadius: 3, textTransform: "uppercase"
              }}>Most popular</span>
            )}
            <div className="mono-label" style={{ fontSize: 10, opacity: 0.6 }}>{p.key.toUpperCase()}</div>
            <div className="serif" style={{ fontSize: 30, lineHeight: 1, color: "var(--ink)" }}>{p.name}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
              <span className="numeric" style={{ fontSize: 56, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1 }}>${p.price}</span>
              <span className="mono-label" style={{ fontSize: 10, opacity: 0.6 }}>/MONTH</span>
            </div>
            <div className="serif" style={{ fontSize: 15, fontStyle: "italic", color: "var(--ink-soft)", lineHeight: 1.4 }}>
              {p.tagline}
            </div>
            <div style={{ height: 1, background: "var(--rule)", margin: "4px 0" }}/>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 13.5, lineHeight: 1.4 }}>
              <li><strong style={{ display: "block", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--sun)", textTransform: "uppercase", marginBottom: 2 }}>Calls</strong>{p.calls}</li>
              <li><strong style={{ display: "block", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--sun)", textTransform: "uppercase", marginBottom: 2 }}>Reply</strong>{p.response}</li>
              <li><strong style={{ display: "block", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--sun)", textTransform: "uppercase", marginBottom: 2 }}>Documents</strong>{p.pages}</li>
              {p.project !== "—" && <li><strong style={{ display: "block", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--sun)", textTransform: "uppercase", marginBottom: 2 }}>Projects</strong>{p.project}</li>}
              <li><strong style={{ display: "block", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--sun)", textTransform: "uppercase", marginBottom: 2 }}>Add-ons</strong>Flat-fee services at member rates</li>
            </ul>
            <div style={{ marginTop: "auto", paddingTop: 18, fontSize: 12, color: "var(--ink-soft)", lineHeight: 1.4, borderTop: "1px solid var(--rule)" }}>
              <span className="mono-label" style={{ fontSize: 9, opacity: 0.55 }}>MADE FOR</span>
              <div style={{ marginTop: 4 }}>{p.bestFor}</div>
            </div>
            <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 6 }}>
              Start
            </a>
          </div>
        ))}
      </div>
      <p style={{ marginTop: 24, fontSize: 12, color: "var(--ink-soft)", textAlign: "center", maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
        Standard hourly rate (call overages, hourly work): $350/hr in 6-min increments. All fees remain subject to the reasonableness requirement of NM Rule 16-101.5(A).
      </p>
    </div>
  </section>
);

const IncludedSection = () => (
  <section id="included" style={{ padding: "96px 0", background: "var(--ink)", color: "var(--cream)" }}>
    <div className="container">
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 48 }}>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)" }}>02 · INCLUDED</span>
        <h2 className="serif" style={{ fontSize: 56, margin: 0, lineHeight: 1, letterSpacing: "-0.01em", color: "var(--cream)" }}>
          Member benefits, every month.
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56 }}>
        <div>
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, fontStyle: "italic", color: "var(--sun-soft)", margin: "0 0 24px" }}>
            Even on the $75 plan. Because the relationship is the product.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 28px", fontSize: 15, lineHeight: 1.4 }}>
            {MEMBER_BENEFITS.map(b => (
              <li key={b.label} style={{ display: "flex", gap: 10 }}>
                <Tick color="var(--sun-soft)"/>
                <span>{b.label}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ borderLeft: "1px solid rgba(245,239,227,0.18)", paddingLeft: 40 }}>
          <div className="mono-label" style={{ fontSize: 11, opacity: 0.7, marginBottom: 18, color: "var(--sun-soft)" }}>PRACTICE AREAS</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
            {PRACTICE_AREAS.map((p, i) => (
              <li key={p} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                <span className="mono-label numeric" style={{ fontSize: 11, opacity: 0.55, minWidth: 24 }}>0{i + 1}</span>
                <span className="serif" style={{ fontSize: 22, color: "var(--cream)" }}>{p}</span>
              </li>
            ))}
          </ul>
          <div className="mono-label" style={{ fontSize: 10, opacity: 0.5, marginTop: 28, lineHeight: 1.5 }}>
            NM LAW ONLY · CIVIL LITIGATION & SPECIALTY MATTERS BY SEPARATE ENGAGEMENT
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HowSection = () => (
  <section id="how" style={{ padding: "96px 0", background: "var(--cream-2)" }}>
    <div className="container">
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>03 · HOW IT WORKS</span>
        <h2 className="serif" style={{ fontSize: 56, margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
          Three steps. No surprises.
        </h2>
      </div>
      <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 48px", maxWidth: 720, lineHeight: 1.4 }}>
        From the free 15-minute intro call to a working relationship, here's exactly what to expect — and where the lines are drawn.
      </p>

      {/* ── Three step cards ── */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 56 }}>
        {[
          {
            n: "01",
            k: "Subscribe",
            v: "Choose the plan that fits, sign your engagement letter, and start your first month.",
            bullets: [
              "Free 15-minute intro call first — no obligation",
              "Month-to-month, cancel anytime through the Client Portal",
              "Representation begins the moment the engagement letter is countersigned"
            ]
          },
          {
            n: "02",
            k: "Book",
            v: "Get your personal scheduling link and Client Portal credentials. One place for everything.",
            bullets: [
              "Standing 30-minute calls included every month",
              "Send documents and messages through the secure portal",
              "Standard business hours: M–F, 9–5 Mountain. No after-hours or emergency response"
            ]
          },
          {
            n: "03",
            k: "Get work done",
            v: "Calls happen, documents get drafted and reviewed, contracts get negotiated.",
            bullets: [
              "Quick questions and routine review are included in your monthly allowance",
              "Discrete projects (drafting a contract, forming an LLC, an estate plan) are quoted up front",
              "Members pay 25% off all flat-fee work — confirmed in writing before any project begins"
            ]
          }
        ].map(s => (
          <div key={s.n} style={{ background: "var(--paper)", padding: "32px 28px", border: "1px solid var(--rule)" }}>
            <div className="mono-label numeric" style={{ fontSize: 11, color: "var(--sun)", marginBottom: 16 }}>{s.n}</div>
            <h3 className="serif" style={{ fontSize: 28, margin: "0 0 12px", lineHeight: 1.1 }}>{s.k}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-soft)", margin: "0 0 18px" }}>{s.v}</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {s.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 10, fontSize: 13, lineHeight: 1.45, color: "var(--ink)" }}>
                  <span style={{ flex: "none", marginTop: 6, width: 5, height: 5, background: "var(--sun)", borderRadius: "50%" }}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* ── What counts vs. what doesn't ── */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 32 }}>
        <div style={{ background: "var(--paper)", padding: "30px 28px", border: "1px solid var(--rule)" }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 14 }}>★ INCLUDED IN EVERY PLAN</div>
          <h3 className="serif" style={{ fontSize: 26, margin: "0 0 18px", lineHeight: 1.1 }}>What your subscription covers</h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              "Standing monthly attorney calls (tier determines how many)",
              "Quick questions by phone, email, and portal message",
              "Routine document review at your plan's allowance",
              "25% off all flat-fee project work",
              "Member rates on criminal defense and expungement (active membership required at time of charge)",
              "A standing attorney–client relationship — someone who already knows you"
            ].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 12, fontSize: 14, lineHeight: 1.5, color: "var(--ink)" }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flex: "none", marginTop: 4 }}>
                  <path d="M2 7 L6 11 L12 3" stroke="var(--sun)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div style={{ background: "var(--ink)", color: "var(--cream)", padding: "30px 28px", border: "1px solid var(--ink)" }}>
          <div className="mono-label" style={{ fontSize: 10, color: "var(--sun-soft)", marginBottom: 14 }}>○ NOT INCLUDED</div>
          <h3 className="serif" style={{ fontSize: 26, margin: "0 0 18px", lineHeight: 1.1, color: "var(--cream)" }}>Where the lines are drawn</h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              "Discrete projects with their own scope and deliverable — quoted separately at member rates",
              "Litigation, trials, appeals, and contested hearings — separate engagement",
              "After-hours, weekends, holidays, or emergency response — call 911 for emergencies",
              "Matters outside our practice areas — we'll tell you up front and refer out if needed",
              "Business work on a Personal plan, or personal work on the Solo Entrepreneur plan — each client gets its own engagement"
            ].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 12, fontSize: 14, lineHeight: 1.5, color: "rgba(245,239,227,0.92)" }}>
                <span style={{ flex: "none", marginTop: 8, width: 8, height: 1, background: "var(--sun-soft)" }}/>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* ── Mini FAQ band: project vs. monthly allowance ── */}
      <div style={{ background: "var(--sun)", color: "var(--ink)", padding: "32px 36px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "start" }}>
        <div>
          <div className="mono-label" style={{ fontSize: 10, marginBottom: 12, color: "var(--ink)" }}>QUICK QUESTION VS. PROJECT</div>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.45, margin: 0, fontStyle: "italic" }}>
            A <strong style={{ fontStyle: "normal" }}>quick question</strong> is the five-minute "is this normal?" call — included.
            A <strong style={{ fontStyle: "normal" }}>project</strong> is scoped work with its own deliverable: one contract drafted, one LLC formed, one estate plan prepared, one matter taken from intake to resolution.
            We'll tell you which it is, in writing, before the work begins.
          </p>
        </div>
        <div>
          <div className="mono-label" style={{ fontSize: 10, marginBottom: 12, color: "var(--ink)" }}>PERSONAL VS. BUSINESS</div>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.45, margin: 0, fontStyle: "italic" }}>
            Personal plans represent <strong style={{ fontStyle: "normal" }}>you</strong> — estate, real estate, personal contracts, disputes you're in as yourself.
            Solo Entrepreneur represents <strong style={{ fontStyle: "normal" }}>your single-member LLC</strong> — not you as an individual.
            Each is its own client and needs its own engagement.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Why a subscription instead of hourly?", a: "Most New Mexicans avoid lawyers because they don't want to start the meter on a five-minute question. Subscription removes that friction — you can pick up the phone whenever you need to, knowing exactly what the month will cost." },
    { q: "What counts as a \"project\"?", a: "A project is a discrete, scoped piece of legal work with a defined deliverable — for example, drafting one contract from scratch, forming one LLC, preparing one estate plan, negotiating one agreement through to signature, or seeing one matter from intake to resolution. Routine calls, quick questions, and the document review built into your plan are not projects — those are already covered by your monthly allowances. Anything that requires a new engagement letter or has its own clear endpoint is a project, and we'll tell you up front before the work begins." },
    { q: "Can I cancel anytime?", a: "Yes. Subscriptions are month-to-month. Cancel through the Client Portal or by emailing the designated address." },
    { q: "What happens if I have a matter outside the included practice areas?", a: "We'll tell you up front. You can engage us under a separate flat-fee or hourly arrangement at member-discounted rates, or we'll refer you to qualified outside counsel — your choice." },
    { q: "Does the Solo Entrepreneur plan cover me personally?", a: "No. The Solo Entrepreneur plan represents only your single-member LLC, not you as an individual. If you want personal representation as well, that requires a separate Personal plan and engagement letter." },
    { q: "Will any of the Personal plans cover my business?", a: "No. The Personal, Personal Plus, and Personal Premium plans represent you as an individual — personal matters like estate planning, real estate, contracts you sign in your own name, and personal disputes. A business (LLC, corporation, partnership, or sole proprietorship operating under a trade name) is a separate client and needs its own engagement. If you run a one-person shop, the Solo Entrepreneur plan is built for that; for anything larger, ask about a business engagement." },
    { q: "What about emergencies and after-hours work?", a: "The subscription is standard business-hours service — no after-hours, weekends, holidays, or emergency response. For urgent matters, call 911 or appropriate emergency services." }
  ];
  return (
    <section id="faq" style={{ padding: "96px 0", background: "var(--paper)" }}>
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 48 }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>04 · FAQ</span>
          <h2 className="serif" style={{ fontSize: 56, margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Common questions.
          </h2>
        </div>
        <div style={{ borderTop: "1px solid var(--rule)" }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", padding: "22px 0", background: "transparent", border: 0,
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
                cursor: "pointer", textAlign: "left", color: "var(--ink)"
              }}>
                <span className="serif" style={{ fontSize: 24, lineHeight: 1.2 }}>{f.q}</span>
                <span style={{
                  flex: "none", width: 28, height: 28, borderRadius: "50%",
                  border: "1px solid var(--ink)", display: "grid", placeItems: "center",
                  transform: open === i ? "rotate(45deg)" : "none", transition: "transform .2s"
                }}>
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                    <path d="M5 1 L5 9 M1 5 L9 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                  </svg>
                </span>
              </button>
              {open === i && (
                <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-soft)", margin: "0 0 22px", maxWidth: 720 }}>
                  {f.a}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CTASection = () => (
  <section style={{ padding: "96px 0", background: "var(--ink)", color: "var(--cream)" }}>
    <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 72, alignItems: "center" }}>
      <div>
        <span className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)" }}>05 · YOUR MOVE</span>
        <h2 className="serif" style={{ fontSize: 88, margin: "20px 0 24px", lineHeight: 0.96, letterSpacing: "-0.02em", color: "var(--cream)" }}>
          Book your <em style={{ color: "var(--sun-soft)" }}>free 15-minute</em> intro call.
        </h2>
        <p className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "rgba(245,239,227,0.85)", margin: "0 0 32px" }}>
          No obligation. No meter running.
        </p>
        <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary lg" style={{ background: "var(--sun)", color: "var(--ink)", borderColor: "var(--sun)" }}>
          Schedule on Calendly →
        </a>
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <div style={{ textAlign: "center" }}>
          <QR size={220} color="var(--cream)" bg="var(--ink)" padding={0}/>
          <div className="mono-label" style={{ fontSize: 11, color: "var(--sun-soft)", marginTop: 16 }}>OR SCAN ME</div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer style={{ padding: "56px 0 32px", background: "var(--paper)", borderTop: "1px solid var(--rule)" }}>
    <div className="container" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48 }}>
      <div>
        <LogoHorizontal height={36}/>
        <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)", margin: "16px 0 0", maxWidth: 360 }}>
          The Law Office of Johnn Osborn, P.C., doing business as Land of Enchantment Law. Licensed in New Mexico.
        </p>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>ALBUQUERQUE</div>
        <div style={{ fontSize: 14, lineHeight: 1.5 }}>9621 4th St NW<br/>Albuquerque, NM 87114</div>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>LAS CRUCES</div>
        <div style={{ fontSize: 14, lineHeight: 1.5 }}>516 E. Lucero Ave<br/>Las Cruces, NM 88005</div>
      </div>
      <div>
        <div className="mono-label" style={{ fontSize: 10, opacity: 0.55, marginBottom: 12 }}>CONTACT</div>
        <div style={{ fontSize: 14, lineHeight: 1.7 }}>
          <a href="tel:+15055851235" className="numeric" style={{ color: "var(--ink)", textDecoration: "none", display: "block" }}>(505) 585-1235</a>
          <a href="mailto:office@landofenchantment.law" style={{ color: "var(--ink)", wordBreak: "break-word", overflowWrap: "anywhere" }}>office@landofenchantment.law</a>
        </div>
      </div>
    </div>
    <div className="container" style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
      <span className="mono-label" style={{ fontSize: 10, opacity: 0.5 }}>© 2026 LAW OFFICE OF JOHNN OSBORN, P.C. · ALL RIGHTS RESERVED</span>
      <span className="mono-label" style={{ fontSize: 10, opacity: 0.5 }}>NM BAR LICENSED · ATTORNEY ADVERTISING</span>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Stats, PlansSection, IncludedSection, HowSection, FAQSection, CTASection, Footer });

const App = () => (
  <>
    <Nav/>
    <Hero/>
    <Stats/>
    <PlansSection/>
    <IncludedSection/>
    <HowSection/>
    <section style={{ padding: "96px 0 32px", background: "var(--paper)", borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 12 }}>
          <span className="mono-label" style={{ fontSize: 11, color: "var(--sun)" }}>04 · FIT CHECK</span>
          <h2 className="serif" style={{ fontSize: 56, margin: 0, lineHeight: 1, letterSpacing: "-0.01em" }}>
            Run your year through the numbers.
          </h2>
        </div>
        <p className="serif" style={{ fontSize: 20, lineHeight: 1.45, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 8px", maxWidth: 760 }}>
          Pull the sliders. We'll price out the year at the exact flat fees from the services page and tell you which plan pays for itself.
        </p>
      </div>
    </section>
    <window.QuizBody/>
    <FAQSection/>
    <CTASection/>
    <Footer/>
  </>
);

if (!window.__loelMode) {
  ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
}
