Centered SaaS Hero Sections in CSS, Bootstrap & Tailwind

<div><span class="lbl">Product screenshot drawn in CSS</span>
<section class="sh sh-ledger" aria-labelledby="sh-ledger-title">
  <nav class="sh-nav" aria-label="Ledgerly">
    <a class="sh-logo" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="8" fill="#4f46e5"/><path d="M9 7v14h10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</a>
    <ul class="sh-links"><li><a href="#">Product</a></li><li><a href="#">Pricing</a></li><li><a href="#">Customers</a></li><li><a href="#">Docs</a></li></ul>
    <a class="sh-signin" href="#">Sign in</a>
  </nav>
  <div class="sh-body">
    <a class="sh-pill" href="#"><b>New</b>Bank feeds in 40 countries <span aria-hidden="true">→</span></a>
    <h1 class="sh-title" id="sh-ledger-title">Close the books in days, <em>not weeks</em></h1>
    <p class="sh-sub">Ledgerly matches transactions, chases missing receipts and drafts your month-end report, so your finance team spends Friday on the forecast instead of the spreadsheet.</p>
    <div class="sh-ctas"><a class="sh-btn sh-btn-primary" href="#">Start a 14-day trial</a><a class="sh-btn sh-btn-ghost" href="#">Book a demo</a></div>
    <p class="sh-proof"><span class="sh-stars" aria-hidden="true">★★★★★</span><span><strong>4.8 out of 5</strong> from 2,140 finance teams</span><span class="sh-dot" aria-hidden="true">·</span><span>No card required</span></p>
  </div>
  <div class="sh-shot">
    <div class="sh-window" role="img" aria-label="Ledgerly dashboard: the March close is 86 percent complete, with 1,284 transactions matched and 12 receipts missing">
      <div class="sh-bar"><i></i><i></i><i></i><span>app.ledgerly.com/close</span></div>
      <div class="sh-app">
        <div class="sh-side"><span class="on">Month-end close</span><span>Transactions</span><span>Receipts</span><span>Reports</span><span>Team</span></div>
        <div class="sh-main">
          <div class="sh-head"><b>March close</b><span class="sh-chip">86% complete</span></div>
          <div class="sh-kpis"><div class="sh-kpi">Matched<b>1,284</b></div><div class="sh-kpi">Missing receipts<b>12</b></div><div class="sh-kpi">Days to close<b>3.5</b></div></div>
          <div class="sh-chart"><i style="--h:38%"></i><i style="--h:52%"></i><i style="--h:44%"></i><i style="--h:61%"></i><i style="--h:58%"></i><i style="--h:72%"></i><i style="--h:66%"></i><i style="--h:80%"></i><i style="--h:91%"></i><i style="--h:34%"></i><i style="--h:22%"></i><i style="--h:12%"></i></div>
        </div>
      </div>
    </div>
  </div>
</section></div>

<div><span class="lbl">Developer tool with a terminal and customer wordmarks</span>
<section class="sh sh-relay" aria-labelledby="sh-relay-title">
  <nav class="sh-nav" aria-label="Relay">
    <a class="sh-logo" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="14" fill="#0f766e"/><path d="M8 18l6-8 6 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Relay</a>
    <ul class="sh-links"><li><a href="#">Features</a></li><li><a href="#">Changelog</a></li><li><a href="#">Pricing</a></li></ul>
    <a class="sh-signin" href="#">Log in</a>
  </nav>
  <div class="sh-body">
    <a class="sh-pill" href="#"><b>v3.2</b>Preview databases are here <span aria-hidden="true">→</span></a>
    <h2 class="sh-title" id="sh-relay-title">A live preview for <span class="sh-mark">every pull request</span></h2>
    <p class="sh-sub">Relay builds each branch into its own URL with a seeded database, posts the link to the pull request and tears it down when you merge.</p>
    <div class="sh-ctas"><a class="sh-btn sh-btn-primary" href="#">Get started free</a><a class="sh-btn sh-btn-ghost" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
    <p class="sh-proof-lead">Shipping previews for 3,900 engineering teams, including</p>
    <ul class="sh-logos" aria-label="Teams using Relay"><li>brightloop</li><li>Quarrylane</li><li>Halcyon</li><li>tessel.io</li><li>Moonward</li></ul>
  </div>
  <div class="sh-shot">
    <div class="sh-term" role="img" aria-label="Terminal: relay deploy builds the branch fix-checkout-tax and reports the preview ready in 41 seconds">
      <div class="sh-bar"><i></i><i></i><i></i><span>~/shop — zsh</span></div>
<pre class="sh-code"><span class="c">$</span> relay deploy --branch fix-checkout-tax
<span class="p">→</span> Building image          <span class="c">12.4s</span>
<span class="p">→</span> Seeding database        <span class="c">snapshot 2026-10-14</span>
<span class="p">→</span> Running migrations      <span class="c">3 applied</span>
<span class="g">✓</span> Preview ready in <span class="y">41s</span>
  <span class="g">https://fix-checkout-tax.shop.relay.dev</span></pre>
    </div>
  </div>
</section></div>

/* Centered SaaS heroes: a minimal nav, an announcement pill, headline, subcopy, two CTAs,
   a social proof line and a product screenshot drawn in HTML and CSS (no image file). */
.sh{--sh-ink:#0f172a;--sh-muted:#475569;--sh-line:#e2e8f0;--sh-bg:#fff;--sh-accent:#4f46e5;--sh-accent-hover:#4338ca;
  --sh-on-accent:#fff;--sh-tint:#eef2ff;--sh-radius:28px;
  position:relative;overflow:hidden;border-radius:var(--sh-radius);background:var(--sh-bg);color:var(--sh-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.sh :where(h1,h2,p,ul,figure){margin:0;padding:0}
.sh a{color:inherit;text-decoration:none}
.sh a:focus-visible,.sh button:focus-visible{outline:3px solid var(--sh-accent);outline-offset:3px;border-radius:8px}
.sh-ledger{background:radial-gradient(60% 50% at 50% 0%,#e0e7ff 0%,rgba(224,231,255,0) 70%),
  linear-gradient(#fff,#fff);}
.sh-ledger::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(79,70,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent)}
/* nav */
.sh-nav{position:relative;display:flex;align-items:center;gap:28px;padding:22px 32px}
.sh-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.08rem;letter-spacing:-.02em}
.sh-logo svg{flex:none}
.sh-links{display:flex;gap:26px;list-style:none;margin:0 0 0 12px;font-size:.92rem;color:var(--sh-muted)}
.sh-links a:hover{color:var(--sh-ink)}
.sh-signin{margin-left:auto;font-size:.92rem;font-weight:600}
/* body */
.sh-body{position:relative;max-width:780px;margin:0 auto;padding:56px 24px 0;text-align:center}
.sh-pill{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1px solid var(--sh-line);border-radius:999px;
  background:#fff;font-size:.86rem;color:var(--sh-muted);box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .2s}
.sh-pill:hover{border-color:#c7d2fe}
.sh-pill b{padding:3px 10px;border-radius:999px;background:var(--sh-tint);color:var(--sh-accent-hover);font-size:.76rem;letter-spacing:.02em}
.sh-title{margin-top:26px;font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.04em;font-weight:800}
.sh-title em{font-style:normal;color:var(--sh-accent)}
.sh-sub{margin:22px auto 0;max-width:600px;font-size:1.12rem;color:var(--sh-muted)}
.sh-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;
  font-weight:700;font-size:1rem;border:1px solid transparent;transition:background-color .2s,border-color .2s,transform .2s}
.sh-btn-primary{background:var(--sh-accent);color:var(--sh-on-accent);box-shadow:0 10px 24px -10px rgba(79,70,229,.7)}
.sh .sh-btn-primary{color:var(--sh-on-accent)}
.sh-btn-primary:hover{background:var(--sh-accent-hover);transform:translateY(-1px)}
.sh-btn-ghost{background:#fff;border-color:#cbd5e1;color:var(--sh-ink)}
.sh-btn-ghost:hover{border-color:#94a3b8}
.sh-proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin-top:24px;font-size:.9rem;color:var(--sh-muted)}
.sh-stars{color:#b45309;letter-spacing:2px}
.sh-proof strong{color:var(--sh-ink)}
/* product screenshot drawn in HTML */
.sh-shot{position:relative;max-width:980px;margin:56px auto -70px;padding:0 24px}
.sh-window{border:1px solid #d6dce6;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(15,23,42,.35),0 0 0 8px rgba(255,255,255,.6)}
.sh-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--sh-line);background:#f8fafc}
.sh-bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1}
.sh-bar span{margin-left:14px;padding:3px 12px;border-radius:7px;background:#eef2f7;font-size:.75rem;color:#475569}
.sh-app{display:grid;grid-template-columns:190px 1fr;min-height:360px}
.sh-side{display:flex;flex-direction:column;gap:6px;padding:18px 14px;border-right:1px solid var(--sh-line);background:#fbfcfe;font-size:.8rem;color:#475569}
.sh-side span{padding:7px 10px;border-radius:8px}
.sh-side .on{background:var(--sh-tint);color:var(--sh-accent-hover);font-weight:700}
.sh-main{padding:22px 24px 90px;text-align:left}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.95rem}
.sh-chip{padding:3px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-size:.74rem;font-weight:700}
.sh-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.sh-kpi{padding:12px 14px;border:1px solid var(--sh-line);border-radius:12px;font-size:.74rem;color:#475569}
.sh-kpi b{display:block;margin-top:2px;font-size:1.3rem;color:var(--sh-ink);letter-spacing:-.02em}
.sh-chart{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:18px;padding:12px;border:1px solid var(--sh-line);border-radius:12px}
.sh-chart i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#818cf8,#4f46e5)}
.sh-chart i:nth-child(n+10){background:#c7d2fe}
/* variant: developer tool with a terminal */
.sh-relay{--sh-accent:#0f766e;--sh-accent-hover:#115e59;--sh-tint:#ccfbf1;
  background:radial-gradient(50% 60% at 15% 10%,#ffedd5 0%,rgba(255,237,213,0) 70%),radial-gradient(50% 60% at 85% 0%,#ccfbf1 0%,rgba(204,251,241,0) 70%),#fffdf9}
.sh-relay .sh-btn-primary{box-shadow:0 10px 24px -10px rgba(15,118,110,.7)}
.sh-relay .sh-pill:hover{border-color:#99f6e4}
.sh-mark{position:relative;white-space:nowrap}
.sh-mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.22em;border-radius:4px;background:#5eead4;z-index:-1}
.sh-mark{z-index:0}
.sh-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:30px;list-style:none;font-size:1.02rem;color:#475569}
.sh-logos li:nth-child(1){font-weight:800;letter-spacing:-.03em}
.sh-logos li:nth-child(2){font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600}
.sh-logos li:nth-child(3){font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem}
.sh-logos li:nth-child(4){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}
.sh-logos li:nth-child(5){font-weight:300;letter-spacing:.02em}
.sh-proof-lead{margin-top:28px;font-size:.86rem;color:#475569}
.sh-term{border-radius:16px;background:#0b1220;overflow:hidden;box-shadow:0 40px 80px -30px rgba(15,23,42,.55),0 0 0 8px rgba(255,255,255,.7);text-align:left}
.sh-term .sh-bar{background:#111a2e;border-bottom-color:#1e293b}
.sh-term .sh-bar i{background:#334155}
.sh-term .sh-bar span{background:#1e293b;color:#cbd5e1}
.sh-code{margin:0;padding:22px 24px 100px;font:500 .84rem/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e2e8f0;overflow:hidden;white-space:pre-wrap}
.sh-code .c{color:#94a3b8}.sh-code .g{color:#5eead4}.sh-code .y{color:#fcd34d}.sh-code .p{color:#c4b5fd}
@media (max-width:760px){
  .sh-nav{padding:18px 20px}
  .sh-links{display:none}
  .sh-body{padding-top:36px}
  .sh-btn{flex:1 1 100%}
  .sh-shot{margin-top:40px;padding:0 14px}
  .sh-app{grid-template-columns:1fr}
  .sh-side{display:none}
  .sh-main{padding:16px 14px 80px}
  .sh-kpis{grid-template-columns:1fr 1fr}
  .sh-kpi:nth-child(3){display:none}
  .sh-code{padding:18px 16px 90px;font-size:.7rem;white-space:pre}
  .sh-dot{display:none}
}
@media (prefers-reduced-motion:reduce){.sh *{transition:none!important}}

<div><span class="lbl">Product screenshot drawn in CSS</span>
<section class="sh sh-ledger" aria-labelledby="sh-ledger-title">
  <nav class="sh-nav d-flex align-items-center gap-3" aria-label="Ledgerly">
    <a class="sh-logo d-inline-flex align-items-center gap-2" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="8" fill="#4f46e5"/><path d="M9 7v14h10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</a>
    <ul class="nav sh-links d-none d-md-flex ms-2"><li class="nav-item"><a class="nav-link" href="#">Product</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Customers</a></li><li class="nav-item"><a class="nav-link" href="#">Docs</a></li></ul>
    <a class="sh-signin ms-auto" href="#">Sign in</a>
  </nav>
  <div class="sh-body mx-auto text-center">
    <a class="sh-pill d-inline-flex align-items-center rounded-pill" href="#"><span class="badge rounded-pill">New</span>Bank feeds in 40 countries <span aria-hidden="true">→</span></a>
    <h1 class="sh-title" id="sh-ledger-title">Close the books in days, <em>not weeks</em></h1>
    <p class="sh-sub">Ledgerly matches transactions, chases missing receipts and drafts your month-end report, so your finance team spends Friday on the forecast instead of the spreadsheet.</p>
    <div class="d-flex flex-wrap justify-content-center gap-3 mt-4 pt-2"><a class="btn sh-btn sh-btn-primary" href="#">Start a 14-day trial</a><a class="btn sh-btn sh-btn-ghost" href="#">Book a demo</a></div>
    <p class="sh-proof d-flex flex-wrap justify-content-center align-items-center"><span class="sh-stars" aria-hidden="true">★★★★★</span><span><strong>4.8 out of 5</strong> from 2,140 finance teams</span><span class="d-none d-md-inline" aria-hidden="true">·</span><span>No card required</span></p>
  </div>
  <div class="sh-shot">
    <div class="sh-window" role="img" aria-label="Ledgerly dashboard: the March close is 86 percent complete, with 1,284 transactions matched and 12 receipts missing">
      <div class="sh-bar d-flex align-items-center"><i></i><i></i><i></i><span>app.ledgerly.com/close</span></div>
      <div class="sh-app d-flex">
        <div class="sh-side d-none d-md-flex flex-column flex-shrink-0"><span class="on">Month-end close</span><span>Transactions</span><span>Receipts</span><span>Reports</span><span>Team</span></div>
        <div class="sh-main flex-grow-1">
          <div class="sh-head d-flex align-items-center justify-content-between gap-3"><b>March close</b><span class="badge rounded-pill sh-chip">86% complete</span></div>
          <div class="row row-cols-2 row-cols-md-3 g-3 mt-0"><div class="col"><div class="sh-kpi">Matched<b>1,284</b></div></div><div class="col"><div class="sh-kpi">Missing receipts<b>12</b></div></div><div class="col d-none d-md-block"><div class="sh-kpi">Days to close<b>3.5</b></div></div></div>
          <div class="sh-chart d-flex align-items-end"><i style="--h:38%"></i><i style="--h:52%"></i><i style="--h:44%"></i><i style="--h:61%"></i><i style="--h:58%"></i><i style="--h:72%"></i><i style="--h:66%"></i><i style="--h:80%"></i><i style="--h:91%"></i><i style="--h:34%"></i><i style="--h:22%"></i><i style="--h:12%"></i></div>
        </div>
      </div>
    </div>
  </div>
</section></div>

<div><span class="lbl">Developer tool with a terminal and customer wordmarks</span>
<section class="sh sh-relay" aria-labelledby="sh-relay-title">
  <nav class="sh-nav d-flex align-items-center gap-3" aria-label="Relay">
    <a class="sh-logo d-inline-flex align-items-center gap-2" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="14" fill="#0f766e"/><path d="M8 18l6-8 6 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Relay</a>
    <ul class="nav sh-links d-none d-md-flex ms-2"><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li></ul>
    <a class="sh-signin ms-auto" href="#">Log in</a>
  </nav>
  <div class="sh-body mx-auto text-center">
    <a class="sh-pill d-inline-flex align-items-center rounded-pill" href="#"><span class="badge rounded-pill">v3.2</span>Preview databases are here <span aria-hidden="true">→</span></a>
    <h2 class="sh-title" id="sh-relay-title">A live preview for <span class="sh-mark">every pull request</span></h2>
    <p class="sh-sub">Relay builds each branch into its own URL with a seeded database, posts the link to the pull request and tears it down when you merge.</p>
    <div class="d-flex flex-wrap justify-content-center gap-3 mt-4 pt-2"><a class="btn sh-btn sh-btn-primary" href="#">Get started free</a><a class="btn sh-btn sh-btn-ghost" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
    <p class="sh-proof-lead">Shipping previews for 3,900 engineering teams, including</p>
    <ul class="sh-logos list-unstyled d-flex flex-wrap justify-content-center" aria-label="Teams using Relay"><li>brightloop</li><li>Quarrylane</li><li>Halcyon</li><li>tessel.io</li><li>Moonward</li></ul>
  </div>
  <div class="sh-shot">
    <div class="sh-term" role="img" aria-label="Terminal: relay deploy builds the branch fix-checkout-tax and reports the preview ready in 41 seconds">
      <div class="sh-bar d-flex align-items-center"><i></i><i></i><i></i><span>~/shop — zsh</span></div>
<pre class="sh-code"><span class="c">$</span> relay deploy --branch fix-checkout-tax
<span class="p">→</span> Building image          <span class="c">12.4s</span>
<span class="p">→</span> Seeding database        <span class="c">snapshot 2026-10-14</span>
<span class="p">→</span> Running migrations      <span class="c">3 applied</span>
<span class="g">✓</span> Preview ready in <span class="y">41s</span>
  <span class="g">https://fix-checkout-tax.shop.relay.dev</span></pre>
    </div>
  </div>
</section></div>

/* Centered SaaS heroes in Bootstrap 5: .nav, .btn, .badge and the grid, restyled through Bootstrap CSS variables.
   The product screenshot is drawn in HTML and CSS. */
.sh{--sh-ink:#0f172a;--sh-muted:#475569;--sh-line:#e2e8f0;--sh-accent:#4f46e5;--sh-accent-hover:#4338ca;--sh-tint:#eef2ff;--sh-radius:28px;
  position:relative;overflow:hidden;border-radius:var(--sh-radius);background:#fff;color:var(--sh-ink)}
.sh a{text-decoration:none}
.sh a:focus-visible{outline:3px solid var(--sh-accent);outline-offset:3px;border-radius:8px;box-shadow:none}
.sh-ledger{background:radial-gradient(60% 50% at 50% 0%,#e0e7ff 0%,rgba(224,231,255,0) 70%),#fff}
.sh-ledger::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(79,70,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent)}
.sh-nav{position:relative;padding:22px 32px}
.sh-logo{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--sh-ink)}
.sh-links{--bs-nav-link-padding-x:13px;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.92rem;--bs-nav-link-color:var(--sh-muted);--bs-nav-link-hover-color:var(--sh-ink);margin-left:0}
.sh-signin{font-size:.92rem;font-weight:600;color:var(--sh-ink)}
.sh-body{position:relative;max-width:780px;padding:56px 24px 0}
.sh-pill{gap:10px;padding:5px 14px 5px 5px;border:1px solid var(--sh-line);background:#fff;font-size:.86rem;color:var(--sh-muted);
  box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .2s}
.sh-pill:hover{border-color:#c7d2fe;color:var(--sh-muted)}
.sh-pill .badge{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.76rem;background:var(--sh-tint);color:var(--sh-accent-hover);letter-spacing:.02em}
.sh-title{margin:26px 0 0;font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.04em;font-weight:800;color:var(--sh-ink)}
.sh-title em{font-style:normal;color:var(--sh-accent)}
.sh-sub{margin:22px auto 0;max-width:600px;font-size:1.12rem;color:var(--sh-muted)}
.sh-btn{--bs-btn-padding-x:24px;--bs-btn-padding-y:12px;--bs-btn-font-size:1rem;--bs-btn-font-weight:700;--bs-btn-border-radius:12px;
  min-height:50px;transition:background-color .2s,border-color .2s,transform .2s}
.sh .sh-btn:focus-visible{outline:3px solid var(--sh-accent);outline-offset:3px;box-shadow:none}
.sh-btn-primary{--bs-btn-color:#fff;--bs-btn-bg:var(--sh-accent);--bs-btn-border-color:var(--sh-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--sh-accent-hover);
  --bs-btn-hover-border-color:var(--sh-accent-hover);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--sh-accent-hover);--bs-btn-active-border-color:var(--sh-accent-hover);
  box-shadow:0 10px 24px -10px rgba(79,70,229,.7)}
.sh-btn-primary:hover{transform:translateY(-1px)}
.sh-btn-ghost{--bs-btn-color:var(--sh-ink);--bs-btn-bg:#fff;--bs-btn-border-color:#cbd5e1;--bs-btn-hover-color:var(--sh-ink);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#94a3b8;
  --bs-btn-active-color:var(--sh-ink);--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#94a3b8}
.sh-proof{gap:6px 12px;margin:24px 0 0;font-size:.9rem;color:var(--sh-muted)}
.sh-stars{color:#b45309;letter-spacing:2px}
.sh-proof strong{color:var(--sh-ink)}
.sh-shot{position:relative;max-width:980px;margin:56px auto -70px;padding:0 24px}
.sh-window{border:1px solid #d6dce6;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 40px 80px -30px rgba(15,23,42,.35),0 0 0 8px rgba(255,255,255,.6)}
.sh-bar{gap:7px;padding:12px 16px;border-bottom:1px solid var(--sh-line);background:#f8fafc}
.sh-bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1}
.sh-bar span{margin-left:14px;padding:3px 12px;border-radius:7px;background:#eef2f7;font-size:.75rem;color:#475569}
.sh-app{min-height:360px}
.sh-side{width:190px;gap:6px;padding:18px 14px;border-right:1px solid var(--sh-line);background:#fbfcfe;font-size:.8rem;color:#475569}
.sh-side span{padding:7px 10px;border-radius:8px}
.sh-side .on{background:var(--sh-tint);color:var(--sh-accent-hover);font-weight:700}
.sh-main{padding:22px 24px 90px;text-align:left}
.sh-head{font-size:.95rem}
.sh-chip{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.74rem;background:#dcfce7;color:#166534}
.sh-kpi{padding:12px 14px;border:1px solid var(--sh-line);border-radius:12px;font-size:.74rem;color:#475569}
.sh-kpi b{display:block;margin-top:2px;font-size:1.3rem;color:var(--sh-ink);letter-spacing:-.02em}
.sh-chart{gap:8px;height:120px;margin-top:18px;padding:12px;border:1px solid var(--sh-line);border-radius:12px}
.sh-chart i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#818cf8,#4f46e5)}
.sh-chart i:nth-child(n+10){background:#c7d2fe}
.sh-relay{--sh-accent:#0f766e;--sh-accent-hover:#115e59;--sh-tint:#ccfbf1;
  background:radial-gradient(50% 60% at 15% 10%,#ffedd5 0%,rgba(255,237,213,0) 70%),radial-gradient(50% 60% at 85% 0%,#ccfbf1 0%,rgba(204,251,241,0) 70%),#fffdf9}
.sh-relay .sh-btn-primary{box-shadow:0 10px 24px -10px rgba(15,118,110,.7)}
.sh-relay .sh-pill:hover{border-color:#99f6e4}
.sh-mark{position:relative;z-index:0;white-space:nowrap}
.sh-mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.22em;border-radius:4px;background:#5eead4;z-index:-1}
.sh-proof-lead{margin:28px 0 0;font-size:.86rem;color:#475569}
.sh-logos{gap:10px 30px;margin:30px 0 0;font-size:1.02rem;color:#475569}
.sh-logos li:nth-child(1){font-weight:800;letter-spacing:-.03em}
.sh-logos li:nth-child(2){font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600}
.sh-logos li:nth-child(3){font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem}
.sh-logos li:nth-child(4){font-family:var(--bs-font-monospace);font-weight:600}
.sh-logos li:nth-child(5){font-weight:300;letter-spacing:.02em}
.sh-term{border-radius:16px;background:#0b1220;overflow:hidden;box-shadow:0 40px 80px -30px rgba(15,23,42,.55),0 0 0 8px rgba(255,255,255,.7);text-align:left}
.sh-term .sh-bar{background:#111a2e;border-bottom-color:#1e293b}
.sh-term .sh-bar i{background:#334155}
.sh-term .sh-bar span{background:#1e293b;color:#cbd5e1}
.sh-code{margin:0;padding:22px 24px 100px;font:500 .84rem/1.85 var(--bs-font-monospace);color:#e2e8f0;overflow:hidden;white-space:pre-wrap}
.sh-code .c{color:#94a3b8}.sh-code .g{color:#5eead4}.sh-code .y{color:#fcd34d}.sh-code .p{color:#c4b5fd}
@media (max-width:767.98px){
  .sh-nav{padding:18px 20px}
  .sh-body{padding-top:36px}
  .sh-btn{flex:1 1 100%}
  .sh-shot{margin-top:40px;padding:0 14px}
  .sh-main{padding:16px 14px 80px}
  .sh-code{padding:18px 16px 90px;font-size:.7rem;white-space:pre}
}
@media (prefers-reduced-motion:reduce){.sh *{transition:none!important}}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Product screenshot drawn in CSS</span>
<section class="relative overflow-hidden rounded-[28px] bg-white [background:radial-gradient(60%_50%_at_50%_0%,#e0e7ff_0%,rgba(224,231,255,0)_70%),#fff] leading-normal text-[#0f172a] before:pointer-events-none before:absolute before:inset-0 before:bg-[linear-gradient(rgba(79,70,229,.06)_1px,transparent_1px),linear-gradient(90deg,rgba(79,70,229,.06)_1px,transparent_1px)] before:bg-size-[44px_44px] before:[mask-image:radial-gradient(70%_60%_at_50%_20%,#000,transparent)] before:content-['']" aria-labelledby="sh-ledger-title">
  <nav class="relative flex items-center gap-7 px-8 py-[22px] max-md:px-5 max-md:py-[18px]" aria-label="Ledgerly">
    <a class="inline-flex items-center gap-2.5 rounded-lg text-[1.08rem] font-extrabold tracking-[-.02em] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="8" fill="#4f46e5"/><path d="M9 7v14h10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledgerly</a>
    <ul class="ml-3 flex gap-[26px] text-[.92rem] text-[#475569] max-md:hidden"><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#">Product</a></li><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#">Pricing</a></li><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#">Customers</a></li><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#">Docs</a></li></ul>
    <a class="ml-auto rounded-lg text-[.92rem] font-semibold focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5]" href="#">Sign in</a>
  </nav>
  <div class="relative mx-auto max-w-[780px] px-6 pt-14 text-center max-md:pt-9">
    <a class="inline-flex items-center gap-2.5 rounded-full border border-[#e2e8f0] bg-white py-[5px] pr-3.5 pl-[5px] text-[.86rem] text-[#475569] shadow-[0_1px_2px_rgba(15,23,42,.05)] transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#c7d2fe] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none" href="#"><b class="rounded-full bg-[#eef2ff] px-2.5 py-[3px] text-[.76rem] tracking-[.02em] text-[#4338ca]">New</b>Bank feeds in 40 countries <span aria-hidden="true">→</span></a>
    <h1 class="mt-[26px] text-[clamp(2.3rem,5.4vw,4rem)] leading-[1.04] font-extrabold tracking-[-.04em]" id="sh-ledger-title">Close the books in days, <em class="text-[#4f46e5] not-italic">not weeks</em></h1>
    <p class="mx-auto mt-[22px] max-w-[600px] text-[1.12rem] text-[#475569]">Ledgerly matches transactions, chases missing receipts and drafts your month-end report, so your finance team spends Friday on the forecast instead of the spreadsheet.</p>
    <div class="mt-[34px] flex flex-wrap justify-center gap-3"><a class="inline-flex min-h-[50px] items-center justify-center rounded-xl border border-transparent bg-[#4f46e5] px-6 font-bold text-white shadow-[0_10px_24px_-10px_rgba(79,70,229,.7)] transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#4338ca] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Start a 14-day trial</a><a class="inline-flex min-h-[50px] items-center justify-center rounded-xl border border-[#cbd5e1] bg-white px-6 font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#94a3b8] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#4f46e5] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Book a demo</a></div>
    <p class="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-1.5 text-[.9rem] text-[#475569]"><span class="tracking-[2px] text-[#b45309]" aria-hidden="true">★★★★★</span><span><strong class="text-[#0f172a]">4.8 out of 5</strong> from 2,140 finance teams</span><span class="max-md:hidden" aria-hidden="true">·</span><span>No card required</span></p>
  </div>
  <div class="relative mx-auto mt-14 -mb-[70px] max-w-[980px] px-6 max-md:mt-10 max-md:px-3.5">
    <div class="overflow-hidden rounded-2xl border border-[#d6dce6] bg-white shadow-[0_40px_80px_-30px_rgba(15,23,42,.35),0_0_0_8px_rgba(255,255,255,.6)]" role="img" aria-label="Ledgerly dashboard: the March close is 86 percent complete, with 1,284 transactions matched and 12 receipts missing">
      <div class="flex items-center gap-[7px] border-b border-[#e2e8f0] bg-[#f8fafc] px-4 py-3"><i class="size-[11px] rounded-full bg-[#cbd5e1]"></i><i class="size-[11px] rounded-full bg-[#cbd5e1]"></i><i class="size-[11px] rounded-full bg-[#cbd5e1]"></i><span class="ml-3.5 rounded-[7px] bg-[#eef2f7] px-3 py-[3px] text-[.75rem] text-[#475569]">app.ledgerly.com/close</span></div>
      <div class="grid min-h-[360px] grid-cols-[190px_1fr] max-md:grid-cols-1">
        <div class="flex flex-col gap-1.5 border-r border-[#e2e8f0] bg-[#fbfcfe] px-3.5 py-[18px] text-[.8rem] text-[#475569] max-md:hidden"><span class="rounded-lg bg-[#eef2ff] px-2.5 py-[7px] font-bold text-[#4338ca]">Month-end close</span><span class="px-2.5 py-[7px]">Transactions</span><span class="px-2.5 py-[7px]">Receipts</span><span class="px-2.5 py-[7px]">Reports</span><span class="px-2.5 py-[7px]">Team</span></div>
        <div class="px-6 pt-[22px] pb-[90px] text-left max-md:px-3.5 max-md:pt-4 max-md:pb-20">
          <div class="flex items-center justify-between gap-3 text-[.95rem]"><b>March close</b><span class="rounded-full bg-[#dcfce7] px-2.5 py-[3px] text-[.74rem] font-bold text-[#166534]">86% complete</span></div>
          <div class="mt-4 grid grid-cols-3 gap-3 max-md:grid-cols-2"><div class="rounded-xl border border-[#e2e8f0] px-3.5 py-3 text-[.74rem] text-[#475569]">Matched<b class="mt-0.5 block text-[1.3rem] tracking-[-.02em] text-[#0f172a]">1,284</b></div><div class="rounded-xl border border-[#e2e8f0] px-3.5 py-3 text-[.74rem] text-[#475569]">Missing receipts<b class="mt-0.5 block text-[1.3rem] tracking-[-.02em] text-[#0f172a]">12</b></div><div class="rounded-xl border border-[#e2e8f0] px-3.5 py-3 text-[.74rem] text-[#475569] max-md:hidden">Days to close<b class="mt-0.5 block text-[1.3rem] tracking-[-.02em] text-[#0f172a]">3.5</b></div></div>
          <div class="mt-[18px] flex h-[120px] items-end gap-2 rounded-xl border border-[#e2e8f0] p-3"><i class="h-[38%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[52%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[44%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[61%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[58%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[72%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[66%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[80%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[91%] flex-1 rounded-[5px_5px_2px_2px] bg-linear-to-b from-[#818cf8] to-[#4f46e5]"></i><i class="h-[34%] flex-1 rounded-[5px_5px_2px_2px] bg-[#c7d2fe]"></i><i class="h-[22%] flex-1 rounded-[5px_5px_2px_2px] bg-[#c7d2fe]"></i><i class="h-[12%] flex-1 rounded-[5px_5px_2px_2px] bg-[#c7d2fe]"></i></div>
        </div>
      </div>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Developer tool with a terminal and customer wordmarks</span>
<section class="relative overflow-hidden rounded-[28px] [background:radial-gradient(50%_60%_at_15%_10%,#ffedd5_0%,rgba(255,237,213,0)_70%),radial-gradient(50%_60%_at_85%_0%,#ccfbf1_0%,rgba(204,251,241,0)_70%),#fffdf9] leading-normal text-[#0f172a]" aria-labelledby="sh-relay-title">
  <nav class="relative flex items-center gap-7 px-8 py-[22px] max-md:px-5 max-md:py-[18px]" aria-label="Relay">
    <a class="inline-flex items-center gap-2.5 rounded-lg text-[1.08rem] font-extrabold tracking-[-.02em] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true" focusable="false"><rect width="28" height="28" rx="14" fill="#0f766e"/><path d="M8 18l6-8 6 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>Relay</a>
    <ul class="ml-3 flex gap-[26px] text-[.92rem] text-[#475569] max-md:hidden"><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#">Features</a></li><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#">Changelog</a></li><li><a class="rounded-lg hover:text-[#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#">Pricing</a></li></ul>
    <a class="ml-auto rounded-lg text-[.92rem] font-semibold focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="#">Log in</a>
  </nav>
  <div class="relative mx-auto max-w-[780px] px-6 pt-14 text-center max-md:pt-9">
    <a class="inline-flex items-center gap-2.5 rounded-full border border-[#e2e8f0] bg-white py-[5px] pr-3.5 pl-[5px] text-[.86rem] text-[#475569] shadow-[0_1px_2px_rgba(15,23,42,.05)] transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#99f6e4] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><b class="rounded-full bg-[#ccfbf1] px-2.5 py-[3px] text-[.76rem] tracking-[.02em] text-[#115e59]">v3.2</b>Preview databases are here <span aria-hidden="true">→</span></a>
    <h2 class="mt-[26px] text-[clamp(2.3rem,5.4vw,4rem)] leading-[1.04] font-extrabold tracking-[-.04em]" id="sh-relay-title">A live preview for <span class="relative z-0 whitespace-nowrap after:absolute after:-inset-x-0.5 after:bottom-[.06em] after:-z-10 after:h-[.22em] after:rounded after:bg-[#5eead4] after:content-['']">every pull request</span></h2>
    <p class="mx-auto mt-[22px] max-w-[600px] text-[1.12rem] text-[#475569]">Relay builds each branch into its own URL with a seeded database, posts the link to the pull request and tears it down when you merge.</p>
    <div class="mt-[34px] flex flex-wrap justify-center gap-3"><a class="inline-flex min-h-[50px] items-center justify-center rounded-xl border border-transparent bg-[#0f766e] px-6 font-bold text-white shadow-[0_10px_24px_-10px_rgba(15,118,110,.7)] transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#115e59] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Get started free</a><a class="inline-flex min-h-[50px] items-center justify-center gap-2 rounded-xl border border-[#cbd5e1] bg-white px-6 font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#94a3b8] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
    <p class="mt-7 text-[.86rem] text-[#475569]">Shipping previews for 3,900 engineering teams, including</p>
    <ul class="wordmarks mt-[30px] flex flex-wrap justify-center gap-x-[30px] gap-y-2.5 text-[1.02rem] text-[#475569]" aria-label="Teams using Relay"><li>brightloop</li><li>Quarrylane</li><li>Halcyon</li><li>tessel.io</li><li>Moonward</li></ul>
  </div>
  <div class="relative mx-auto mt-14 -mb-[70px] max-w-[980px] px-6 max-md:mt-10 max-md:px-3.5">
    <div class="overflow-hidden rounded-2xl bg-[#0b1220] text-left shadow-[0_40px_80px_-30px_rgba(15,23,42,.55),0_0_0_8px_rgba(255,255,255,.7)]" role="img" aria-label="Terminal: relay deploy builds the branch fix-checkout-tax and reports the preview ready in 41 seconds">
      <div class="flex items-center gap-[7px] border-b border-[#1e293b] bg-[#111a2e] px-4 py-3"><i class="size-[11px] rounded-full bg-[#334155]"></i><i class="size-[11px] rounded-full bg-[#334155]"></i><i class="size-[11px] rounded-full bg-[#334155]"></i><span class="ml-3.5 rounded-[7px] bg-[#1e293b] px-3 py-[3px] text-[.75rem] text-[#cbd5e1]">~/shop — zsh</span></div>
<pre class="m-0 overflow-hidden px-6 pt-[22px] pb-[100px] font-mono text-[.84rem] leading-[1.85] font-medium whitespace-pre-wrap text-[#e2e8f0] max-md:px-4 max-md:pt-[18px] max-md:pb-[90px] max-md:text-[.7rem] max-md:whitespace-pre"><span class="text-[#94a3b8]">$</span> relay deploy --branch fix-checkout-tax
<span class="text-[#c4b5fd]">→</span> Building image          <span class="text-[#94a3b8]">12.4s</span>
<span class="text-[#c4b5fd]">→</span> Seeding database        <span class="text-[#94a3b8]">snapshot 2026-10-14</span>
<span class="text-[#c4b5fd]">→</span> Running migrations      <span class="text-[#94a3b8]">3 applied</span>
<span class="text-[#5eead4]">✓</span> Preview ready in <span class="text-[#fcd34d]">41s</span>
  <span class="text-[#5eead4]">https://fix-checkout-tax.shop.relay.dev</span></pre>
    </div>
  </div>
</section></div>

/* Customer wordmarks: each fictional name gets its own type treatment. */
@utility wordmarks {
  & li:nth-child(1){font-weight:800;letter-spacing:-.03em}
  & li:nth-child(2){font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600}
  & li:nth-child(3){font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem}
  & li:nth-child(4){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}
  & li:nth-child(5){font-weight:300;letter-spacing:.02em}
}