/* Celestial Dial landing page — ported verbatim from the "Aster" Claude Design project
   (claude.ai/design/p/4ede657c…, file Aster.dc.html). The markup is kept 1:1; the tweaks
   panel drives it via --accent and [data-motif] exactly like the original DCLogic did.
   Sections can be progressively extracted into discrete <Nav/>, <Hero/>, … components. */

const MARKUP = `
  <!-- ===================== NAV ===================== -->
  <header style="position:sticky;top:0;z-index:50;background:rgba(245,239,227,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(34,26,46,.08)">
    <nav style="max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px">
      <a href="#top" style="display:flex;align-items:center;gap:9px;text-decoration:none;color:#221A2E">
        <span style="font-size:19px;color:var(--accent,#BD8A4C)">✦</span>
        <span style="font-family:'Newsreader',Georgia,serif;font-size:23px;font-weight:500;letter-spacing:.01em">Celestial Dial</span>
      </a>
      <div style="display:flex;align-items:center;gap:30px">
        <div style="display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500">
          <a href="#how" style="color:#4B4357;text-decoration:none">How it works</a>
          <a href="#sample" style="color:#4B4357;text-decoration:none">A sample</a>
          <a href="#pricing" style="color:#4B4357;text-decoration:none">Pricing</a>
          <a href="#faq" style="color:#4B4357;text-decoration:none">FAQ</a>
        </div>
        <a href="#pricing" style="background:var(--accent,#BD8A4C);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 20px;border-radius:999px;box-shadow:0 5px 14px rgba(189,138,76,.32)">Start free week</a>
      </div>
    </nav>
  </header>

  <!-- ===================== HERO ===================== -->
  <section id="top" style="position:relative;background:#F5EFE3">
    <span data-motif style="position:absolute;top:90px;left:7%;color:var(--accent,#BD8A4C);font-size:14px;animation:asterTwinkle 4s ease-in-out infinite">✦</span>
    <span data-motif style="position:absolute;top:220px;left:46%;color:#221A2E;opacity:.25;font-size:9px;animation:asterTwinkle 5.5s ease-in-out .5s infinite">✦</span>
    <span data-motif style="position:absolute;top:140px;right:38%;color:var(--accent,#BD8A4C);font-size:10px;animation:asterTwinkle 6s ease-in-out 1s infinite">✦</span>
    <span data-motif style="position:absolute;bottom:120px;left:13%;color:#221A2E;opacity:.2;font-size:12px;animation:asterTwinkle 5s ease-in-out .8s infinite">✦</span>

    <div style="max-width:1180px;margin:0 auto;padding:78px 28px 92px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center">
      <div>
        <div style="display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C);background:rgba(189,138,76,.1);padding:7px 14px;border-radius:999px">Your daily horoscope, by text</div>
        <h1 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:62px;line-height:1.04;letter-spacing:-.015em;margin:22px 0 0">Begin the day with a<br>moment that’s yours.</h1>
        <p style="font-size:19px;line-height:1.6;max-width:498px;margin:24px 0 0;color:#564E60">Celestial Dial sends one thoughtful, personal reading to your phone each morning — at the hour you choose. Before the inbox fills and everyone needs you, there’s a quiet minute that belongs to you alone.</p>
        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px">
          <a href="#pricing" style="background:var(--accent,#BD8A4C);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:15px 30px;border-radius:999px;box-shadow:0 8px 22px rgba(189,138,76,.34)">Start your free week</a>
          <a href="#sample" style="background:transparent;color:#221A2E;text-decoration:none;font-weight:600;font-size:16px;padding:15px 26px;border-radius:999px;border:1px solid rgba(34,26,46,.18)">Read a sample →</a>
        </div>
        <p style="font-size:14px;color:#8A8194;margin:20px 0 0;display:flex;align-items:center;gap:8px"><span style="color:var(--accent,#BD8A4C)">✦</span> 7 days free, then $9/mo · cancel anytime by texting STOP</p>
      </div>

      <!-- Phone mockup -->
      <div style="display:flex;justify-content:center">
        <div style="width:312px;background:#15101D;border-radius:48px;padding:13px;box-shadow:0 40px 80px -24px rgba(28,20,40,.55),0 0 0 1px rgba(255,255,255,.04) inset">
          <div style="background:#ECE6DC;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;height:600px;position:relative">
            <div style="position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#15101D;border-radius:999px;z-index:5"></div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:15px 24px 6px;font-size:13px;font-weight:600;color:#221A2E">
              <span>7:02</span>
              <span style="letter-spacing:1px;opacity:.85">●●● ▮</span>
            </div>
            <div style="display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 12px;border-bottom:1px solid rgba(34,26,46,.08);background:rgba(236,230,220,.9)">
              <div style="width:46px;height:46px;border-radius:50%;background:#221A2E;display:flex;align-items:center;justify-content:center;color:var(--accent,#BD8A4C);font-size:21px">✦</div>
              <div style="font-size:13.5px;font-weight:600;color:#221A2E">Celestial Dial</div>
            </div>
            <div style="flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden">
              <div style="text-align:center;font-size:11px;color:#9A9089;margin-bottom:2px">Tuesday, May 4 · 7:02 AM</div>
              <div style="align-self:flex-start;max-width:84%;background:#fff;color:#2A2336;font-size:14.5px;line-height:1.5;padding:12px 15px;border-radius:19px;border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(34,26,46,.08)">Diane, today’s clear thinking is a gift, and you’ll want to use it on something that matters. The Mercury–Pluto trine sharpens your read on a situation you’ve been quietly turning over. Trust the pattern you’re seeing and say it out loud.</div>
              <div style="align-self:flex-end;font-size:10.5px;color:#9A9089;margin-right:6px">Delivered</div>
            </div>
            <div style="padding:10px 16px 14px;display:flex;align-items:center;gap:8px">
              <div style="flex:1;height:34px;border-radius:999px;border:1px solid rgba(34,26,46,.16);display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:#9A9089">Text Message</div>
            </div>
            <div style="width:120px;height:5px;border-radius:999px;background:#221A2E;opacity:.35;margin:0 auto 9px"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== TRUST STRIP ===================== -->
  <section style="background:#F5EFE3;border-top:1px solid rgba(34,26,46,.08);border-bottom:1px solid rgba(34,26,46,.08)">
    <div style="max-width:1180px;margin:0 auto;padding:26px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;font-size:14.5px;color:#564E60">
      <span style="display:flex;align-items:center;gap:9px"><span style="color:var(--accent,#BD8A4C)">✦</span> A grounded minute before the day begins</span>
      <span style="display:flex;align-items:center;gap:9px"><span style="color:var(--accent,#BD8A4C)">✦</span> Written for the life you actually lead</span>
      <span style="display:flex;align-items:center;gap:9px"><span style="color:var(--accent,#BD8A4C)">✦</span> Yours alone · read it with your coffee</span>
    </div>
  </section>

  <!-- ===================== HOW IT WORKS ===================== -->
  <section id="how" style="background:#F5EFE3">
    <div style="max-width:1180px;margin:0 auto;padding:96px 28px">
      <div style="font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C)">How it works</div>
      <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:44px;line-height:1.1;letter-spacing:-.01em;margin:14px 0 0;max-width:620px">Three minutes to set up. Then it simply arrives.</h2>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px">
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:18px;padding:32px 28px">
          <div style="width:42px;height:42px;border-radius:50%;background:rgba(189,138,76,.13);color:var(--accent,#BD8A4C);font-family:'Newsreader',serif;font-size:20px;display:flex;align-items:center;justify-content:center;font-weight:500">1</div>
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:23px;margin:20px 0 10px">Tell us about you</h3>
          <p style="font-size:15.5px;margin:0;color:#564E60">Your name, your birthday, and — if you know it — when and where you were born. Enough to read your chart, and nothing you’ll have to go hunting for.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:18px;padding:32px 28px">
          <div style="width:42px;height:42px;border-radius:50%;background:rgba(189,138,76,.13);color:var(--accent,#BD8A4C);font-family:'Newsreader',serif;font-size:20px;display:flex;align-items:center;justify-content:center;font-weight:500">2</div>
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:23px;margin:20px 0 10px">Choose your hour</h3>
          <p style="font-size:15.5px;margin:0;color:#564E60">Before the house wakes, or once it’s finally quiet again — pick the moment your reading arrives, in your own time zone. Change it whenever life does.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:18px;padding:32px 28px">
          <div style="width:42px;height:42px;border-radius:50%;background:rgba(189,138,76,.13);color:var(--accent,#BD8A4C);font-family:'Newsreader',serif;font-size:20px;display:flex;align-items:center;justify-content:center;font-weight:500">3</div>
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:23px;margin:20px 0 10px">Let it find you</h3>
          <p style="font-size:15.5px;margin:0;color:#564E60">Each morning, one personal reading is already waiting in your texts. Nothing to download, nothing to remember — it simply arrives.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== SAMPLES (dark) ===================== -->
  <section id="sample" style="position:relative;background:#221A2E">
    <span data-motif style="position:absolute;top:64px;left:10%;color:var(--accent,#BD8A4C);font-size:12px;animation:asterTwinkle 5s ease-in-out infinite">✦</span>
    <span data-motif style="position:absolute;top:130px;right:14%;color:#fff;opacity:.3;font-size:9px;animation:asterTwinkle 6s ease-in-out 1.2s infinite">✦</span>
    <span data-motif style="position:absolute;bottom:90px;left:30%;color:var(--accent,#BD8A4C);font-size:10px;animation:asterTwinkle 4.5s ease-in-out .6s infinite">✦</span>
    <div style="max-width:1180px;margin:0 auto;padding:96px 28px">
      <div style="text-align:center;max-width:640px;margin:0 auto">
        <div style="font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C)">A few mornings</div>
        <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#F4EEE0;font-size:44px;line-height:1.1;letter-spacing:-.01em;margin:14px 0 14px">Like a note from a friend who knows you — and your chart.</h2>
        <p style="font-size:17px;color:#B6ADBC;margin:0">Grounded, useful, and a little poetic — written for the life you actually lead, never the “cosmic energies, beautiful soul” cliché. Here’s the real thing.</p>
      </div>

      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px;max-width:920px;margin-left:auto;margin-right:auto">
        <div style="background:#FCF9F2;border-radius:20px;padding:26px 28px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"><span style="font-family:'Newsreader',serif;font-size:18px;color:#221A2E;font-weight:500">Cancer</span><span style="font-size:12.5px;color:#9A8FA0">· Tuesday · Mercury trine Pluto</span></div>
          <p style="font-size:16px;line-height:1.6;color:#2A2336;margin:0">“Diane, today’s clear thinking is a gift, and you’ll want to use it on something that matters. The Mercury–Pluto trine sharpens your read on a situation you’ve been quietly turning over. Trust the pattern you’re seeing and say it out loud.”</p>
        </div>
        <div style="background:#FCF9F2;border-radius:20px;padding:26px 28px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"><span style="font-family:'Newsreader',serif;font-size:18px;color:#221A2E;font-weight:500">Aries</span><span style="font-size:12.5px;color:#9A8FA0">· Friday · Mars in the third house</span></div>
          <p style="font-size:16px;line-height:1.6;color:#2A2336;margin:0">“Lauren, your words have weight today, more than usual. Mars moving through your third house gives them edge, and the people who matter will be paying attention. Pick the one conversation that’s been waiting and start it.”</p>
        </div>
        <div style="background:#FCF9F2;border-radius:20px;padding:26px 28px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"><span style="font-family:'Newsreader',serif;font-size:18px;color:#221A2E;font-weight:500">Libra</span><span style="font-size:12.5px;color:#9A8FA0">· Sunday · Venus in the tenth house</span></div>
          <p style="font-size:16px;line-height:1.6;color:#2A2336;margin:0">“Renée, your gift this week is reading a room before you walk into it, and it’s working in your favor at work. Venus in your tenth house wants you to be seen for what you actually do. Keep choosing the version that’s true.”</p>
        </div>
        <div style="background:#FCF9F2;border-radius:20px;padding:26px 28px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"><span style="font-family:'Newsreader',serif;font-size:18px;color:#221A2E;font-weight:500">Pisces</span><span style="font-size:12.5px;color:#9A8FA0">· Wednesday · Neptune trine Sun</span></div>
          <p style="font-size:16px;line-height:1.6;color:#2A2336;margin:0">“Maggie, today softens you in a way that feels good, not lost. Let yourself dream a little out loud with someone who can hold it. The trine between Neptune and your sun is rare — you don’t need to do anything productive with it.”</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== WHY TEXT ===================== -->
  <section id="why" style="background:#F5EFE3">
    <div style="max-width:1180px;margin:0 auto;padding:96px 28px;display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center">
      <div>
        <div style="font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C)">Why text?</div>
        <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:44px;line-height:1.1;letter-spacing:-.01em;margin:14px 0 18px">No new app. No new habit. Just your phone.</h2>
        <p style="font-size:17px;line-height:1.65;color:#564E60;margin:0 0 16px">You don’t need another app to check, another password to remember, or another feed to disappear into. You have a phone, and you read your texts. That’s all this asks of you.</p>
        <p style="font-size:17px;line-height:1.65;color:#564E60;margin:0">That’s the whole idea. One unhurried message, arriving where your attention already is, becomes a small ritual that’s yours — not one more thing on the list.</p>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px">
        <div style="background:#221A2E;border-radius:18px;padding:30px 26px;color:#F4EEE0">
          <div style="font-family:'Newsreader',serif;font-size:48px;font-weight:500;color:var(--accent,#BD8A4C);line-height:1">90%+</div>
          <p style="font-size:14.5px;color:#B6ADBC;margin:10px 0 0">of text messages are opened — vs. roughly 20% of marketing email.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:18px;padding:30px 26px">
          <div style="font-family:'Newsreader',serif;font-size:48px;font-weight:500;color:#221A2E;line-height:1">1</div>
          <p style="font-size:14.5px;color:#564E60;margin:10px 0 0">message a morning. No feed, no badges piling up, nothing pulling you to scroll.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:18px;padding:30px 26px">
          <div style="font-family:'Newsreader',serif;font-size:48px;font-weight:500;color:#221A2E;line-height:1">24</div>
          <p style="font-size:14.5px;color:#564E60;margin:10px 0 0">hours to choose from — your reading arrives at the exact hour you pick.</p>
        </div>
        <div style="background:#221A2E;border-radius:18px;padding:30px 26px;color:#F4EEE0">
          <div style="font-family:'Newsreader',serif;font-size:48px;font-weight:500;color:var(--accent,#BD8A4C);line-height:1">STOP</div>
          <p style="font-size:14.5px;color:#B6ADBC;margin:10px 0 0">is all it takes to leave. One text, unsubscribed instantly. No hard feelings.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== PRICING ===================== -->
  <section id="pricing" style="background:#F5EFE3">
    <div style="max-width:1180px;margin:0 auto;padding:40px 28px 100px">
      <div style="text-align:center;max-width:600px;margin:0 auto 44px">
        <div style="font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C)">Pricing</div>
        <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:44px;line-height:1.1;letter-spacing:-.01em;margin:14px 0 0">One simple plan. Free for a week.</h2>
      </div>

      <div style="max-width:460px;margin:0 auto;background:#FCF9F2;border:1px solid rgba(34,26,46,.1);border-radius:24px;padding:38px 36px;box-shadow:0 30px 60px -34px rgba(34,26,46,.3)">
        <div style="display:flex;align-items:baseline;gap:10px">
          <span style="font-family:'Newsreader',serif;font-size:58px;font-weight:500;color:#221A2E;line-height:1">$9</span>
          <span style="font-size:17px;color:#8A8194">/ month</span>
        </div>
        <p style="font-size:15.5px;color:#564E60;margin:8px 0 0">Start with <strong style="color:#221A2E">7 days free</strong>. Cancel before it ends and you’re never charged.</p>

        <div style="height:1px;background:rgba(34,26,46,.1);margin:26px 0"></div>

        <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px">
          <li style="display:flex;gap:11px;font-size:15.5px;color:#3D3548"><span style="color:var(--accent,#BD8A4C)">✦</span> A personal reading every single morning</li>
          <li style="display:flex;gap:11px;font-size:15.5px;color:#3D3548"><span style="color:var(--accent,#BD8A4C)">✦</span> Delivered at the hour you choose, your time zone</li>
          <li style="display:flex;gap:11px;font-size:15.5px;color:#3D3548"><span style="color:var(--accent,#BD8A4C)">✦</span> A web dashboard with your last seven days</li>
          <li style="display:flex;gap:11px;font-size:15.5px;color:#3D3548"><span style="color:var(--accent,#BD8A4C)">✦</span> Change your time or pause whenever you like</li>
        </ul>

        <a href="#top" style="display:block;text-align:center;background:var(--accent,#BD8A4C);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:16px;border-radius:999px;margin-top:30px;box-shadow:0 10px 24px rgba(189,138,76,.34)">Start your free week</a>
        <p style="font-size:12.5px;line-height:1.55;color:#9A9089;margin:16px 0 0;text-align:center">Consent is not a condition of purchase. Up to 35 messages/month. Message &amp; data rates may apply. Reply HELP for help, STOP to cancel.</p>
      </div>
    </div>
  </section>

  <!-- ===================== FAQ ===================== -->
  <section id="faq" style="background:#F5EFE3;border-top:1px solid rgba(34,26,46,.08)">
    <div style="max-width:880px;margin:0 auto;padding:90px 28px">
      <div style="text-align:center;margin-bottom:48px">
        <div style="font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#BD8A4C)">Questions</div>
        <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:44px;line-height:1.1;margin:14px 0 0">Good things to ask first.</h2>
      </div>

      <div style="display:flex;flex-direction:column;gap:14px">
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">Is it actually personal, or just my sun sign?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">It’s written for you by name, using your sun sign and the day’s real planetary transits. Share your birth time and place and we’ll layer in deeper, chart-aware personalization as it rolls out.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">Can I choose when it arrives?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">Any hour you like, in your own time zone — and you can change it anytime from your dashboard. It even follows you correctly through daylight saving.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">How do I stop the texts?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">Reply <strong style="color:#221A2E">STOP</strong> to any message and you’re unsubscribed immediately. Reply <strong style="color:#221A2E">HELP</strong> any time for support, or <strong style="color:#221A2E">START</strong> to come back.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">What do you need from me?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">Your name, birthday, phone number and email to set up the account. Birth time and place are optional — they only make your readings richer.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">Is my data private?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">Your sensitive details are encrypted, never sold, and never used for advertising. You can download or permanently delete everything from your settings whenever you want.</p>
        </div>
        <div style="background:#FCF9F2;border:1px solid rgba(34,26,46,.08);border-radius:16px;padding:24px 28px">
          <h3 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#221A2E;font-size:21px;margin:0 0 8px">Is this real advice?</h3>
          <p style="font-size:15.5px;color:#564E60;margin:0">No — Celestial Dial is for reflection and entertainment. It isn’t medical, legal, or financial advice, and it’s not a substitute for a professional.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== FINAL CTA ===================== -->
  <section style="position:relative;background:#221A2E">
    <span data-motif style="position:absolute;top:50px;left:18%;color:var(--accent,#BD8A4C);font-size:13px;animation:asterTwinkle 5s ease-in-out infinite">✦</span>
    <span data-motif style="position:absolute;bottom:60px;right:20%;color:#fff;opacity:.3;font-size:10px;animation:asterTwinkle 6s ease-in-out 1s infinite">✦</span>
    <div style="max-width:760px;margin:0 auto;padding:96px 28px;text-align:center">
      <div style="font-size:24px;color:var(--accent,#BD8A4C)">✦</div>
      <h2 style="font-family:'Newsreader',Georgia,serif;font-weight:500;color:#F4EEE0;font-size:50px;line-height:1.08;letter-spacing:-.01em;margin:16px 0 0">Tomorrow morning,<br>let the sky speak first.</h2>
      <p style="font-size:18px;color:#B6ADBC;margin:20px auto 0;max-width:480px">Set it up in three minutes. Your first reading arrives at the hour you choose.</p>
      <a href="#pricing" style="display:inline-block;background:var(--accent,#BD8A4C);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:16px 34px;border-radius:999px;margin-top:30px;box-shadow:0 10px 28px rgba(189,138,76,.4)">Start your free week</a>
      <p style="font-size:13.5px;color:#857B90;margin:18px 0 0">7 days free · then $9/mo · cancel anytime</p>
    </div>
  </section>

  <!-- ===================== FOOTER ===================== -->
  <footer style="background:#1A1424;color:#9A8FA0">
    <div style="max-width:1180px;margin:0 auto;padding:60px 28px 28px">
      <div style="display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px">
        <div>
          <div style="display:flex;align-items:center;gap:9px;color:#F4EEE0">
            <span style="font-size:18px;color:var(--accent,#BD8A4C)">✦</span>
            <span style="font-family:'Newsreader',serif;font-size:22px;font-weight:500">Celestial Dial</span>
          </div>
          <p style="font-size:14px;line-height:1.6;margin:14px 0 0;max-width:280px">A thoughtful daily horoscope — delivered by text, at the hour you choose. A small moment that’s yours.</p>
        </div>
        <div>
          <div style="font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C9BFD2;margin-bottom:14px">Product</div>
          <div style="display:flex;flex-direction:column;gap:10px;font-size:14px">
            <a href="#how" style="color:#9A8FA0;text-decoration:none">How it works</a>
            <a href="#sample" style="color:#9A8FA0;text-decoration:none">A sample</a>
            <a href="#pricing" style="color:#9A8FA0;text-decoration:none">Pricing</a>
          </div>
        </div>
        <div>
          <div style="font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C9BFD2;margin-bottom:14px">Company</div>
          <div style="display:flex;flex-direction:column;gap:10px;font-size:14px">
            <a href="#" style="color:#9A8FA0;text-decoration:none">About</a>
            <a href="#" style="color:#9A8FA0;text-decoration:none">Help</a>
            <a href="#" style="color:#9A8FA0;text-decoration:none">Contact</a>
          </div>
        </div>
        <div>
          <div style="font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C9BFD2;margin-bottom:14px">Legal</div>
          <div style="display:flex;flex-direction:column;gap:10px;font-size:14px">
            <a href="#" style="color:#9A8FA0;text-decoration:none">Privacy Policy</a>
            <a href="#" style="color:#9A8FA0;text-decoration:none">Terms of Service</a>
            <a href="#" style="color:#9A8FA0;text-decoration:none">SMS Terms</a>
          </div>
        </div>
      </div>

      <div style="height:1px;background:rgba(255,255,255,.08);margin:36px 0 22px"></div>

      <p style="font-size:12.5px;line-height:1.6;color:#7E7488;margin:0 0 14px;max-width:760px">Horoscopes from Celestial Dial are for entertainment and reflection. They are not medical, legal, financial, or professional advice. If you are in crisis, please contact a qualified professional or call or text 988, the Suicide and Crisis Lifeline.</p>
      <div style="display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12.5px;color:#6E6478">
        <span>© 2026 Celestial Dial. All rights reserved.</span>
        <span>By subscribing you agree to receive recurring automated texts. Msg &amp; data rates may apply. Reply STOP to cancel, HELP for help.</span>
      </div>
    </div>
  </footer>
`;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const rootRef = React.useRef(null);

  React.useEffect(() => { applyTweaks(rootRef.current, t); }, [t]);

  return (
    <div data-screen-label="Aster landing">
      <div
        ref={rootRef}
        style={{
          "--accent": t.accent,
          fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
          color: "#4B4357",
          background: "#F5EFE3",
          overflowX: "hidden",
          lineHeight: 1.55,
          WebkitTextSizeAdjust: "100%",
        }}
        dangerouslySetInnerHTML={{ __html: MARKUP }}
      />
      <TweaksPanel t={t} setTweak={setTweak} />
    </div>
  );
}
