App Download Hero Sections in CSS, Bootstrap & Tailwind

<div><span class="lbl">Split app hero with a phone drawn in CSS</span>
<section class="ap ap-budget" aria-labelledby="ap-budget-title">
  <div class="ap-copy">
    <p class="ap-kicker"><svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>App of the day in 14 countries</p>
    <h1 class="ap-title" id="ap-budget-title">A budget you will actually keep</h1>
    <p class="ap-sub">Pocketwise sorts every card payment into a category the moment it happens and tells you, in plain numbers, what is left for the week.</p>
    <div class="ap-stores">
      <a class="ap-store" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small>Download for</small>iPhone</span></a>
      <a class="ap-store alt" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small>Get it for</small>Android</span></a>
    </div>
    <dl class="ap-stats">
      <div><dt>from 18,200 reviews</dt><dd>4.9</dd></div>
      <div><dt>monthly users</dt><dd>650k</dd></div>
      <div><dt>for the core app</dt><dd>£0</dd></div>
    </dl>
  </div>
  <div class="ap-device">
    <div class="ap-phone" role="img" aria-label="Pocketwise app screen: £1,240 left of a £2,600 October budget, with groceries, transport and eating out tracked; eating out is £28 over">
      <div class="ap-screen">
        <p class="ap-hello">October budget <span>9 days left</span></p>
        <div class="ap-ring"><div><b>£1,240</b><span>left of £2,600</span></div></div>
        <ul class="ap-cats">
          <li><p>Groceries <span>£312 / £400</span></p><i style="--p:78%"></i></li>
          <li><p>Transport <span>£96 / £150</span></p><i style="--p:64%"></i></li>
          <li class="over"><p>Eating out <span>£188 / £160</span></p><i style="--p:100%"></i></li>
          <li><p>Bills <span>£640 / £640</span></p><i style="--p:100%"></i></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>

<div><span class="lbl">Centred app hero with two phones and a stats row</span>
<section class="ap ap-run" aria-labelledby="ap-run-title">
  <p class="ap-kicker"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 4l-2 6h6l-8 10 2-7H5z"/></svg>New: audio-guided 5K plans</p>
  <h2 class="ap-title" id="ap-run-title">From the sofa to a 10K in twelve weeks</h2>
  <p class="ap-sub">Stride builds a plan around the days you can run, adjusts it after every session and talks you through the hard intervals.</p>
  <div class="ap-stores">
    <a class="ap-store" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small>Download for</small>iPhone</span></a>
    <a class="ap-store" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small>Get it for</small>Android</span></a>
  </div>
  <dl class="ap-stats">
    <div><dt>App rating</dt><dd>4.8</dd></div>
    <div><dt>Runs logged</dt><dd>2.1M</dd></div>
    <div><dt>Coached plans</dt><dd>36</dd></div>
    <div><dt>Free trial</dt><dd>14 days</dd></div>
  </dl>
  <div class="ap-pair">
    <div class="ap-phone" role="img" aria-label="Stride run summary: 5.2 kilometres in 27 minutes 41 seconds, a new personal best">
      <div class="ap-screen">
        <p class="ap-week">Morning run<span>Thursday, Riverside loop</span></p>
        <div class="ap-map"><svg viewBox="0 0 240 250" aria-hidden="true" focusable="false"><path d="M30 210 C60 190 50 150 90 140 S150 160 160 120 140 60 190 50 220 90 200 130" fill="none" stroke="#c2410c" stroke-width="5" stroke-linecap="round"/><circle cx="30" cy="210" r="8" fill="#fff" stroke="#c2410c" stroke-width="4"/><circle cx="200" cy="130" r="8" fill="#c2410c"/></svg></div>
        <div class="ap-run-stats"><div><b>5.2 km</b><span>Distance</span></div><div><b>27:41</b><span>Time</span></div><div><b>5'19"</b><span>Per km</span></div></div>
        <p class="ap-pb"><svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>New 5K personal best</p>
      </div>
    </div>
    <div class="ap-phone" role="img" aria-label="Stride training plan, week 6 of 12: easy run and intervals done, long run on Sunday">
      <div class="ap-screen">
        <p class="ap-week">Week 6 of 12<span>10K plan, 3 runs a week</span></p>
        <ul class="ap-plan">
          <li class="done"><em>✓</em><div><b>Easy run</b><span>Tue · 30 min</span></div></li>
          <li class="done"><em>✓</em><div><b>Intervals</b><span>Thu · 6 × 400 m</span></div></li>
          <li><em>Sun</em><div><b>Long run</b><span>Sun · 8 km</span></div></li>
          <li><em>Mon</em><div><b>Rest and stretch</b><span>Mon · 15 min</span></div></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>

/* App heroes: a phone drawn in CSS (no device image), download buttons written as text with a generic icon
   instead of store logos, and a stats row marked up as a description list. */
.ap{--ap-ink:#0f172a;--ap-muted:#475569;--ap-accent:#047857;--ap-accent-hover:#065f46;--ap-tint:#d1fae5;--ap-radius:28px;
  position:relative;overflow:hidden;border-radius:var(--ap-radius);color:var(--ap-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.ap :where(h1,h2,p,dl,dd,ul){margin:0;padding:0}
.ap a{color:inherit;text-decoration:none}
.ap a:focus-visible{outline:3px solid var(--ap-accent);outline-offset:3px;border-radius:14px}
.ap-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--ap-tint);font-size:.82rem;font-weight:700;color:var(--ap-accent-hover)}
.ap-title{margin-top:20px;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.ap-sub{margin-top:18px;max-width:500px;font-size:1.08rem;color:var(--ap-muted)}
.ap-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ap-store{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:8px 22px 8px 16px;border-radius:14px;background:var(--ap-ink);color:#fff;
  font-size:1.08rem;font-weight:700;line-height:1.15;transition:background-color .2s,transform .2s}
.ap .ap-store{color:#fff}
.ap-store small{display:block;font-size:.72rem;font-weight:500;color:#e2e8f0}
.ap-store:hover{background:#1e293b;transform:translateY(-1px)}
.ap-store.alt{background:#fff;color:var(--ap-ink);box-shadow:inset 0 0 0 1.5px #94a3b8}
.ap .ap-store.alt{color:var(--ap-ink)}
.ap-store.alt small{color:var(--ap-muted)}
.ap-store.alt:hover{background:#f8fafc}
.ap-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px 40px;margin-top:40px}
.ap-stats div{display:flex;flex-direction:column}
.ap-stats dt{order:2;font-size:.86rem;color:var(--ap-muted)}
.ap-stats dd{font-size:1.75rem;font-weight:800;letter-spacing:-.03em}
/* the phone */
.ap-phone{position:relative;width:290px;flex:none;padding:12px;border-radius:46px;background:#0f172a;box-shadow:0 0 0 2px #334155,0 50px 90px -30px rgba(15,23,42,.55)}
.ap-phone::before{content:"";position:absolute;top:22px;left:50%;width:92px;height:26px;border-radius:999px;background:#0f172a;transform:translateX(-50%);z-index:1}
.ap-screen{min-height:560px;padding:52px 18px 20px;border-radius:35px;background:#f8fafc;font-size:.8rem;color:var(--ap-ink);overflow:hidden}
/* variant 1: budgeting app */
.ap-budget{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:60px 56px 0 56px;
  background:radial-gradient(60% 70% at 85% 40%,#a7f3d0 0%,rgba(167,243,208,0) 70%),#ecfdf5}
.ap-budget .ap-copy{padding-bottom:60px}
.ap-budget .ap-device{display:flex;justify-content:center;align-self:end;margin-bottom:-120px}
.ap-hello{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}
.ap-hello span{font-weight:500;color:var(--ap-muted);font-size:.74rem}
.ap-ring{display:grid;place-items:center;width:170px;height:170px;margin:22px auto 0;border-radius:50%;
  background:radial-gradient(closest-side,#f8fafc 76%,transparent 77% 100%),conic-gradient(var(--ap-accent) 0 52%,#cbd5e1 52% 100%)}
.ap-ring b{display:block;font-size:1.5rem;letter-spacing:-.02em;text-align:center}
.ap-ring span{display:block;font-size:.72rem;color:var(--ap-muted);text-align:center}
.ap-cats{display:grid;gap:12px;margin-top:22px;list-style:none}
.ap-cats li{padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.ap-cats p{display:flex;justify-content:space-between;font-weight:600}
.ap-cats p span{font-weight:500;color:var(--ap-muted)}
.ap-cats i{display:block;height:6px;margin-top:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.ap-cats i::before{content:"";display:block;width:var(--p);height:100%;border-radius:inherit;background:var(--ap-accent)}
.ap-cats .over i::before{background:#dc2626}
.ap-cats .over p span{color:#b91c1c}
/* variant 2: running app, centred */
.ap-run{--ap-accent:#c2410c;--ap-accent-hover:#9a3412;--ap-tint:#ffedd5;padding:64px 40px 0;text-align:center;
  background:radial-gradient(50% 50% at 50% 100%,#fed7aa 0%,rgba(254,215,170,0) 80%),linear-gradient(#fffbf5,#fff4e6)}
.ap-run .ap-title,.ap-run .ap-sub{margin-left:auto;margin-right:auto}
.ap-run .ap-title{max-width:760px}
.ap-run .ap-stores{justify-content:center}
.ap-run .ap-stats{grid-template-columns:repeat(4,1fr);margin:34px auto 0;max-width:820px;gap:16px}
.ap-run .ap-stats div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px #fed7aa}
.ap-pair{position:relative;display:flex;justify-content:center;gap:28px;margin:56px auto -120px;max-width:700px}
.ap-pair .ap-phone{width:270px}
.ap-pair .ap-phone:first-child{transform:rotate(-5deg) translateY(30px)}
.ap-pair .ap-phone:last-child{transform:rotate(5deg) translateY(30px)}
.ap-map{position:relative;height:250px;margin:4px -6px 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(#e7ecef 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#e7ecef 1px,transparent 1px) 0 0/22px 22px,#f1f5f4}
.ap-map svg{position:absolute;inset:0;width:100%;height:100%}
.ap-run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;text-align:center}
.ap-run-stats b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.ap-run-stats span{font-size:.68rem;color:var(--ap-muted)}
.ap-pb{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--ap-tint);color:var(--ap-accent-hover);font-weight:700;text-align:left}
.ap-plan{display:grid;gap:10px;margin-top:16px;list-style:none;text-align:left}
.ap-plan li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.ap-plan li b{display:block}
.ap-plan li span{color:var(--ap-muted);font-size:.72rem}
.ap-plan em{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;background:#f1f5f9;font-style:normal;font-weight:800;font-size:.72rem}
.ap-plan .done em{background:var(--ap-accent);color:#fff}
.ap-week{font-weight:800;font-size:1rem;text-align:left}
.ap-week span{display:block;font-weight:500;font-size:.74rem;color:var(--ap-muted)}
@media (max-width:991px){
  .ap-budget{grid-template-columns:1fr;padding:40px 22px 0}
  .ap-budget .ap-copy{padding-bottom:0}
  .ap-budget .ap-device{margin-bottom:-140px}
  .ap-run{padding:44px 22px 0}
  .ap-pair .ap-phone:last-child{display:none}
  .ap-pair .ap-phone:first-child{transform:none}
  .ap-run .ap-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .ap-store{flex:1 1 100%;justify-content:center}
  .ap-stats{gap:16px 24px}
  .ap-phone{width:256px}
  .ap-pair .ap-phone{width:256px}
  .ap-ring{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){.ap *{transition:none!important}}

<div><span class="lbl">Split app hero with a phone drawn in CSS</span>
<section class="ap ap-budget row align-items-center" aria-labelledby="ap-budget-title">
  <div class="ap-copy col-lg-6">
    <p class="ap-kicker badge rounded-pill d-inline-flex align-items-center mb-0"><svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>App of the day in 14 countries</p>
    <h1 class="ap-title" id="ap-budget-title">A budget you will actually keep</h1>
    <p class="ap-sub">Pocketwise sorts every card payment into a category the moment it happens and tells you, in plain numbers, what is left for the week.</p>
    <div class="ap-stores d-flex flex-wrap">
      <a class="btn ap-store d-inline-flex align-items-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small>Download for</small>iPhone</span></a>
      <a class="btn ap-store alt d-inline-flex align-items-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small>Get it for</small>Android</span></a>
    </div>
    <dl class="ap-stats">
      <div><dt>from 18,200 reviews</dt><dd>4.9</dd></div>
      <div><dt>monthly users</dt><dd>650k</dd></div>
      <div><dt>for the core app</dt><dd>£0</dd></div>
    </dl>
  </div>
  <div class="ap-device col-lg-6 d-flex justify-content-center align-self-end">
    <div class="ap-phone" role="img" aria-label="Pocketwise app screen: £1,240 left of a £2,600 October budget, with groceries, transport and eating out tracked; eating out is £28 over">
      <div class="ap-screen">
        <p class="ap-hello d-flex justify-content-between align-items-center">October budget <span>9 days left</span></p>
        <div class="ap-ring d-grid rounded-circle text-center"><div><b>£1,240</b><span>left of £2,600</span></div></div>
        <ul class="ap-cats list-unstyled d-grid">
          <li><p class="d-flex justify-content-between">Groceries <span>£312 / £400</span></p><div class="progress"><div class="progress-bar" style="width:78%"></div></div></li>
          <li><p class="d-flex justify-content-between">Transport <span>£96 / £150</span></p><div class="progress"><div class="progress-bar" style="width:64%"></div></div></li>
          <li class="over"><p class="d-flex justify-content-between">Eating out <span>£188 / £160</span></p><div class="progress"><div class="progress-bar" style="width:100%"></div></div></li>
          <li><p class="d-flex justify-content-between">Bills <span>£640 / £640</span></p><div class="progress"><div class="progress-bar" style="width:100%"></div></div></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>

<div><span class="lbl">Centred app hero with two phones and a stats row</span>
<section class="ap ap-run text-center" aria-labelledby="ap-run-title">
  <p class="ap-kicker badge rounded-pill d-inline-flex align-items-center mb-0"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 4l-2 6h6l-8 10 2-7H5z"/></svg>New: audio-guided 5K plans</p>
  <h2 class="ap-title mx-auto" id="ap-run-title">From the sofa to a 10K in twelve weeks</h2>
  <p class="ap-sub mx-auto">Stride builds a plan around the days you can run, adjusts it after every session and talks you through the hard intervals.</p>
  <div class="ap-stores d-flex flex-wrap justify-content-center">
    <a class="btn ap-store d-inline-flex align-items-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small>Download for</small>iPhone</span></a>
    <a class="btn ap-store d-inline-flex align-items-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small>Get it for</small>Android</span></a>
  </div>
  <dl class="ap-stats">
    <div><dt>App rating</dt><dd>4.8</dd></div>
    <div><dt>Runs logged</dt><dd>2.1M</dd></div>
    <div><dt>Coached plans</dt><dd>36</dd></div>
    <div><dt>Free trial</dt><dd>14 days</dd></div>
  </dl>
  <div class="ap-pair position-relative d-flex justify-content-center">
    <div class="ap-phone" role="img" aria-label="Stride run summary: 5.2 kilometres in 27 minutes 41 seconds, a new personal best">
      <div class="ap-screen text-start">
        <p class="ap-week">Morning run<span>Thursday, Riverside loop</span></p>
        <div class="ap-map"><svg viewBox="0 0 240 250" aria-hidden="true" focusable="false"><path d="M30 210 C60 190 50 150 90 140 S150 160 160 120 140 60 190 50 220 90 200 130" fill="none" stroke="#c2410c" stroke-width="5" stroke-linecap="round"/><circle cx="30" cy="210" r="8" fill="#fff" stroke="#c2410c" stroke-width="4"/><circle cx="200" cy="130" r="8" fill="#c2410c"/></svg></div>
        <div class="ap-run-stats row row-cols-3 g-1 text-center"><div class="col"><b>5.2 km</b><span>Distance</span></div><div class="col"><b>27:41</b><span>Time</span></div><div class="col"><b>5'19"</b><span>Per km</span></div></div>
        <p class="ap-pb d-flex align-items-center"><svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>New 5K personal best</p>
      </div>
    </div>
    <div class="ap-phone d-none d-lg-block" role="img" aria-label="Stride training plan, week 6 of 12: easy run and intervals done, long run on Sunday">
      <div class="ap-screen text-start">
        <p class="ap-week">Week 6 of 12<span>10K plan, 3 runs a week</span></p>
        <ul class="ap-plan list-unstyled d-grid">
          <li class="done d-flex align-items-center"><em class="d-grid">✓</em><div><b>Easy run</b><span>Tue · 30 min</span></div></li>
          <li class="done d-flex align-items-center"><em class="d-grid">✓</em><div><b>Intervals</b><span>Thu · 6 × 400 m</span></div></li>
          <li class="d-flex align-items-center"><em class="d-grid">Sun</em><div><b>Long run</b><span>Sun · 8 km</span></div></li>
          <li class="d-flex align-items-center"><em class="d-grid">Mon</em><div><b>Rest and stretch</b><span>Mon · 15 min</span></div></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>

/* App heroes in Bootstrap 5: the grid, .badge, .btn for the download buttons and .progress for the budget bars,
   with a phone drawn in CSS and text download buttons instead of store logos. */
.ap{--ap-ink:#0f172a;--ap-muted:#475569;--ap-accent:#047857;--ap-accent-hover:#065f46;--ap-tint:#d1fae5;--ap-radius:28px;
  overflow:hidden;border-radius:var(--ap-radius);color:var(--ap-ink)}
.ap a{text-decoration:none}
.ap :is(a,.btn):focus-visible{outline:3px solid var(--ap-accent);outline-offset:3px;box-shadow:none}
.ap-kicker{--bs-badge-padding-x:12px;--bs-badge-padding-y:6px;--bs-badge-font-size:.82rem;--bs-badge-font-weight:700;--bs-badge-color:var(--ap-accent-hover);gap:8px;background:var(--ap-tint)}
.ap-title{margin:20px 0 0;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.ap-sub{margin:18px 0 0;max-width:500px;font-size:1.08rem;color:var(--ap-muted)}
.ap-stores{gap:12px;margin-top:30px}
.ap-store{--bs-btn-padding-x:22px;--bs-btn-padding-y:8px;--bs-btn-font-size:1.08rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.15;--bs-btn-border-radius:14px;--bs-btn-border-width:0;
  --bs-btn-color:#fff;--bs-btn-bg:var(--ap-ink);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#1e293b;--bs-btn-active-color:#fff;--bs-btn-active-bg:#1e293b;
  gap:12px;min-height:58px;padding-left:16px;text-align:left;transition:background-color .2s,transform .2s}
.ap-store small{display:block;font-size:.72rem;font-weight:500;color:#e2e8f0}
.ap-store:hover{transform:translateY(-1px)}
.ap-store.alt{--bs-btn-color:var(--ap-ink);--bs-btn-bg:#fff;--bs-btn-hover-color:var(--ap-ink);--bs-btn-hover-bg:#f8fafc;--bs-btn-active-color:var(--ap-ink);--bs-btn-active-bg:#f8fafc;box-shadow:inset 0 0 0 1.5px #94a3b8}
.ap-store.alt small{color:var(--ap-muted)}
.ap-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px 40px;margin:40px 0 0}
.ap-stats div{display:flex;flex-direction:column}
.ap-stats dt{order:2;font-size:.86rem;font-weight:400;color:var(--ap-muted)}
.ap-stats dd{margin:0;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.5}
.ap-phone{position:relative;width:290px;flex:none;padding:12px;border-radius:46px;background:#0f172a;box-shadow:0 0 0 2px #334155,0 50px 90px -30px rgba(15,23,42,.55)}
.ap-phone::before{content:"";position:absolute;top:22px;left:50%;width:92px;height:26px;border-radius:999px;background:#0f172a;transform:translateX(-50%);z-index:1}
.ap-screen{min-height:560px;padding:52px 18px 20px;border-radius:35px;background:#f8fafc;font-size:.8rem;color:var(--ap-ink);overflow:hidden;line-height:1.5}
.ap-screen p{margin:0}
.ap-budget{--bs-gutter-x:40px;--bs-gutter-y:0;row-gap:40px;margin:0;padding:60px 36px 0;background:radial-gradient(60% 70% at 85% 40%,#a7f3d0 0%,rgba(167,243,208,0) 70%),#ecfdf5}
.ap-budget .ap-copy{padding-bottom:60px}
.ap-budget .ap-device{margin-bottom:-120px}
.ap-hello{font-weight:700;font-size:.9rem}
.ap-hello span{font-weight:500;color:var(--ap-muted);font-size:.74rem}
.ap-ring{width:170px;height:170px;margin:22px auto 0;place-items:center;
  background:radial-gradient(closest-side,#f8fafc 76%,transparent 77% 100%),conic-gradient(var(--ap-accent) 0 52%,#cbd5e1 52% 100%)}
.ap-ring b{display:block;font-size:1.5rem;letter-spacing:-.02em}
.ap-ring span{display:block;font-size:.72rem;color:var(--ap-muted)}
.ap-cats{gap:12px;margin:22px 0 0}
.ap-cats li{padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.ap-cats p{font-weight:600}
.ap-cats p span{font-weight:500;color:var(--ap-muted)}
.ap-cats .progress{--bs-progress-height:6px;--bs-progress-bg:#e2e8f0;--bs-progress-bar-bg:var(--ap-accent);--bs-progress-border-radius:999px;margin-top:8px}
.ap-cats .over .progress{--bs-progress-bar-bg:#dc2626}
.ap-cats .over p span{color:#b91c1c}
.ap-run{--ap-accent:#c2410c;--ap-accent-hover:#9a3412;--ap-tint:#ffedd5;padding:64px 40px 0;
  background:radial-gradient(50% 50% at 50% 100%,#fed7aa 0%,rgba(254,215,170,0) 80%),linear-gradient(#fffbf5,#fff4e6)}
.ap-run .ap-title{max-width:760px}
.ap-run .ap-stats{grid-template-columns:repeat(4,1fr);margin:34px auto 0;max-width:820px;gap:16px}
.ap-run .ap-stats div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px #fed7aa}
.ap-pair{gap:28px;margin:56px auto -120px;max-width:700px}
.ap-pair .ap-phone{width:270px}
.ap-pair .ap-phone:first-child{transform:rotate(-5deg) translateY(30px)}
.ap-pair .ap-phone:last-child{transform:rotate(5deg) translateY(30px)}
.ap-map{position:relative;height:250px;margin:4px -6px 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(#e7ecef 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#e7ecef 1px,transparent 1px) 0 0/22px 22px,#f1f5f4}
.ap-map svg{position:absolute;inset:0;width:100%;height:100%}
.ap-run-stats{margin-top:14px}
.ap-run-stats b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.ap-run-stats span{font-size:.68rem;color:var(--ap-muted)}
.ap-screen .ap-pb{gap:8px;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--ap-tint);color:var(--ap-accent-hover);font-weight:700}
.ap-plan{gap:10px;margin:16px 0 0}
.ap-plan li{gap:10px;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.ap-plan li b{display:block}
.ap-plan li span{color:var(--ap-muted);font-size:.72rem}
.ap-plan em{width:30px;height:30px;place-items:center;flex:none;border-radius:10px;background:#f1f5f9;font-style:normal;font-weight:800;font-size:.72rem}
.ap-plan .done em{background:var(--ap-accent);color:#fff}
.ap-week{font-weight:800;font-size:1rem}
.ap-week span{display:block;font-weight:500;font-size:.74rem;color:var(--ap-muted)}
@media (max-width:991.98px){
  .ap-budget{--bs-gutter-x:0;padding:40px 22px 0}
  .ap-budget .ap-copy{padding-bottom:0}
  .ap-budget .ap-device{margin-bottom:-140px}
  .ap-run{padding:44px 22px 0}
  .ap-pair .ap-phone:first-child{transform:none}
  .ap-run .ap-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .ap-store{flex:1 1 100%;justify-content:center}
  .ap-stats{gap:16px 24px}
  .ap-phone,.ap-pair .ap-phone{width:256px}
  .ap-ring{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){.ap *{transition:none!important}}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Split app hero with a phone drawn in CSS</span>
<section class="grid grid-cols-1 items-center gap-10 overflow-hidden rounded-[28px] [background:radial-gradient(60%_70%_at_85%_40%,#a7f3d0_0%,rgba(167,243,208,0)_70%),#ecfdf5] px-[22px] pt-10 leading-normal text-[#0f172a] min-[992px]:grid-cols-2 min-[992px]:px-14 min-[992px]:pt-[60px]" aria-labelledby="ap-budget-title">
  <div class="min-[992px]:pb-[60px]">
    <p class="inline-flex items-center gap-2 rounded-full bg-[#d1fae5] px-3 py-[5px] text-[.82rem] font-bold text-[#065f46]"><svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>App of the day in 14 countries</p>
    <h1 class="mt-5 text-[clamp(2.2rem,4.8vw,3.6rem)] leading-[1.05] font-extrabold tracking-[-.035em]" id="ap-budget-title">A budget you will actually keep</h1>
    <p class="mt-[18px] max-w-[500px] text-[1.08rem] text-[#475569]">Pocketwise sorts every card payment into a category the moment it happens and tells you, in plain numbers, what is left for the week.</p>
    <div class="mt-[30px] flex flex-wrap gap-3">
      <a class="inline-flex min-h-[58px] items-center gap-3 rounded-[14px] bg-[#0f172a] py-2 pr-[22px] pl-4 text-[1.08rem] leading-[1.15] font-bold text-white transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#1e293b] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#047857] motion-reduce:transition-none max-[480px]:flex-[1_1_100%] max-[480px]:justify-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small class="block text-[.72rem] font-medium text-[#e2e8f0]">Download for</small>iPhone</span></a>
      <a class="inline-flex min-h-[58px] items-center gap-3 rounded-[14px] bg-white py-2 pr-[22px] pl-4 text-[1.08rem] leading-[1.15] font-bold text-[#0f172a] shadow-[inset_0_0_0_1.5px_#94a3b8] transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#f8fafc] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#047857] motion-reduce:transition-none max-[480px]:flex-[1_1_100%] max-[480px]:justify-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small class="block text-[.72rem] font-medium text-[#475569]">Get it for</small>Android</span></a>
    </div>
    <dl class="mt-10 grid grid-cols-[repeat(3,auto)] justify-start gap-x-10 gap-y-5 max-[480px]:gap-x-6 max-[480px]:gap-y-4">
      <div class="flex flex-col"><dt class="order-2 text-[.86rem] text-[#475569]">from 18,200 reviews</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">4.9</dd></div>
      <div class="flex flex-col"><dt class="order-2 text-[.86rem] text-[#475569]">monthly users</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">650k</dd></div>
      <div class="flex flex-col"><dt class="order-2 text-[.86rem] text-[#475569]">for the core app</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">£0</dd></div>
    </dl>
  </div>
  <div class="-mb-[140px] flex justify-center self-end min-[992px]:-mb-[120px]">
    <div class="relative w-[290px] flex-none rounded-[46px] bg-[#0f172a] p-3 shadow-[0_0_0_2px_#334155,0_50px_90px_-30px_rgba(15,23,42,.55)] before:absolute before:top-[22px] before:left-1/2 before:z-[1] before:h-[26px] before:w-[92px] before:-translate-x-1/2 before:rounded-full before:bg-[#0f172a] before:content-[''] max-[480px]:w-64" role="img" aria-label="Pocketwise app screen: £1,240 left of a £2,600 October budget, with groceries, transport and eating out tracked; eating out is £28 over">
      <div class="min-h-[560px] overflow-hidden rounded-[35px] bg-[#f8fafc] px-[18px] pt-[52px] pb-5 text-[.8rem]">
        <p class="flex items-center justify-between text-[.9rem] font-bold">October budget <span class="text-[.74rem] font-medium text-[#475569]">9 days left</span></p>
        <div class="mx-auto mt-[22px] grid size-[170px] place-items-center rounded-full [background:radial-gradient(closest-side,#f8fafc_76%,transparent_77%_100%),conic-gradient(#047857_0_52%,#cbd5e1_52%_100%)] text-center max-[480px]:size-[150px]"><div><b class="block text-[1.5rem] tracking-[-.02em]">£1,240</b><span class="block text-[.72rem] text-[#475569]">left of £2,600</span></div></div>
        <ul class="mt-[22px] grid gap-3">
          <li class="rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><p class="flex justify-between font-semibold">Groceries <span class="font-medium text-[#475569]">£312 / £400</span></p><i class="mt-2 block h-1.5 overflow-hidden rounded-full bg-[#e2e8f0]"><i class="block h-full w-[78%] rounded-full bg-[#047857]"></i></i></li>
          <li class="rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><p class="flex justify-between font-semibold">Transport <span class="font-medium text-[#475569]">£96 / £150</span></p><i class="mt-2 block h-1.5 overflow-hidden rounded-full bg-[#e2e8f0]"><i class="block h-full w-[64%] rounded-full bg-[#047857]"></i></i></li>
          <li class="rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><p class="flex justify-between font-semibold">Eating out <span class="font-medium text-[#b91c1c]">£188 / £160</span></p><i class="mt-2 block h-1.5 overflow-hidden rounded-full bg-[#e2e8f0]"><i class="block h-full w-full rounded-full bg-[#dc2626]"></i></i></li>
          <li class="rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><p class="flex justify-between font-semibold">Bills <span class="font-medium text-[#475569]">£640 / £640</span></p><i class="mt-2 block h-1.5 overflow-hidden rounded-full bg-[#e2e8f0]"><i class="block h-full w-full rounded-full bg-[#047857]"></i></i></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Centred app hero with two phones and a stats row</span>
<section class="overflow-hidden rounded-[28px] [background:radial-gradient(50%_50%_at_50%_100%,#fed7aa_0%,rgba(254,215,170,0)_80%),linear-gradient(#fffbf5,#fff4e6)] px-[22px] pt-11 text-center leading-normal text-[#0f172a] min-[992px]:px-10 min-[992px]:pt-16" aria-labelledby="ap-run-title">
  <p class="inline-flex items-center gap-2 rounded-full bg-[#ffedd5] px-3 py-[5px] text-[.82rem] font-bold text-[#9a3412]"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 4l-2 6h6l-8 10 2-7H5z"/></svg>New: audio-guided 5K plans</p>
  <h2 class="mx-auto mt-5 max-w-[760px] text-[clamp(2.2rem,4.8vw,3.6rem)] leading-[1.05] font-extrabold tracking-[-.035em]" id="ap-run-title">From the sofa to a 10K in twelve weeks</h2>
  <p class="mx-auto mt-[18px] max-w-[500px] text-[1.08rem] text-[#475569]">Stride builds a plan around the days you can run, adjusts it after every session and talks you through the hard intervals.</p>
  <div class="mt-[30px] flex flex-wrap justify-center gap-3">
    <a class="inline-flex min-h-[58px] items-center gap-3 rounded-[14px] bg-[#0f172a] py-2 pr-[22px] pl-4 text-left text-[1.08rem] leading-[1.15] font-bold text-white transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#1e293b] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#c2410c] motion-reduce:transition-none max-[480px]:flex-[1_1_100%] max-[480px]:justify-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3"/></svg><span><small class="block text-[.72rem] font-medium text-[#e2e8f0]">Download for</small>iPhone</span></a>
    <a class="inline-flex min-h-[58px] items-center gap-3 rounded-[14px] bg-[#0f172a] py-2 pr-[22px] pl-4 text-left text-[1.08rem] leading-[1.15] font-bold text-white transition-[color,background-color,border-color,transform,translate,scale] duration-200 hover:-translate-y-px hover:bg-[#1e293b] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#c2410c] motion-reduce:transition-none max-[480px]:flex-[1_1_100%] max-[480px]:justify-center" href="#"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg><span><small class="block text-[.72rem] font-medium text-[#e2e8f0]">Get it for</small>Android</span></a>
  </div>
  <dl class="mx-auto mt-[34px] grid max-w-[820px] grid-cols-2 gap-4 min-[992px]:grid-cols-4">
    <div class="flex flex-col rounded-2xl bg-white/70 px-4 py-3.5 shadow-[inset_0_0_0_1px_#fed7aa]"><dt class="order-2 text-[.86rem] text-[#475569]">App rating</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">4.8</dd></div>
    <div class="flex flex-col rounded-2xl bg-white/70 px-4 py-3.5 shadow-[inset_0_0_0_1px_#fed7aa]"><dt class="order-2 text-[.86rem] text-[#475569]">Runs logged</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">2.1M</dd></div>
    <div class="flex flex-col rounded-2xl bg-white/70 px-4 py-3.5 shadow-[inset_0_0_0_1px_#fed7aa]"><dt class="order-2 text-[.86rem] text-[#475569]">Coached plans</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">36</dd></div>
    <div class="flex flex-col rounded-2xl bg-white/70 px-4 py-3.5 shadow-[inset_0_0_0_1px_#fed7aa]"><dt class="order-2 text-[.86rem] text-[#475569]">Free trial</dt><dd class="text-[1.75rem] font-extrabold tracking-[-.03em]">14 days</dd></div>
  </dl>
  <div class="relative mx-auto mt-14 -mb-[120px] flex max-w-[700px] justify-center gap-7">
    <div class="relative w-[270px] flex-none rounded-[46px] bg-[#0f172a] p-3 shadow-[0_0_0_2px_#334155,0_50px_90px_-30px_rgba(15,23,42,.55)] before:absolute before:top-[22px] before:left-1/2 before:z-[1] before:h-[26px] before:w-[92px] before:-translate-x-1/2 before:rounded-full before:bg-[#0f172a] before:content-[''] max-[480px]:w-64 min-[992px]:translate-y-[30px] min-[992px]:-rotate-5" role="img" aria-label="Stride run summary: 5.2 kilometres in 27 minutes 41 seconds, a new personal best">
      <div class="min-h-[560px] overflow-hidden rounded-[35px] bg-[#f8fafc] px-[18px] pt-[52px] pb-5 text-left text-[.8rem]">
        <p class="text-base font-extrabold">Morning run<span class="block text-[.74rem] font-medium text-[#475569]">Thursday, Riverside loop</span></p>
        <div class="relative -mx-1.5 mt-1 h-[250px] overflow-hidden rounded-[18px] [background:linear-gradient(#e7ecef_1px,transparent_1px)_0_0/22px_22px,linear-gradient(90deg,#e7ecef_1px,transparent_1px)_0_0/22px_22px,#f1f5f4]"><svg class="absolute inset-0 size-full" viewBox="0 0 240 250" aria-hidden="true" focusable="false"><path d="M30 210 C60 190 50 150 90 140 S150 160 160 120 140 60 190 50 220 90 200 130" fill="none" stroke="#c2410c" stroke-width="5" stroke-linecap="round"/><circle cx="30" cy="210" r="8" fill="#fff" stroke="#c2410c" stroke-width="4"/><circle cx="200" cy="130" r="8" fill="#c2410c"/></svg></div>
        <div class="mt-3.5 grid grid-cols-3 gap-1.5 text-center"><div><b class="block text-[1.05rem] tracking-[-.02em]">5.2 km</b><span class="text-[.68rem] text-[#475569]">Distance</span></div><div><b class="block text-[1.05rem] tracking-[-.02em]">27:41</b><span class="text-[.68rem] text-[#475569]">Time</span></div><div><b class="block text-[1.05rem] tracking-[-.02em]">5'19"</b><span class="text-[.68rem] text-[#475569]">Per km</span></div></div>
        <p class="mt-3.5 flex items-center gap-2 rounded-[14px] bg-[#ffedd5] px-3 py-2.5 font-bold text-[#9a3412]"><svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path d="M10 1l2.6 5.6 6 .7-4.5 4.1 1.2 6L10 14.4 4.7 17.4l1.2-6L1.4 7.3l6-.7z"/></svg>New 5K personal best</p>
      </div>
    </div>
    <div class="relative hidden w-[270px] flex-none rounded-[46px] bg-[#0f172a] p-3 shadow-[0_0_0_2px_#334155,0_50px_90px_-30px_rgba(15,23,42,.55)] before:absolute before:top-[22px] before:left-1/2 before:z-[1] before:h-[26px] before:w-[92px] before:-translate-x-1/2 before:rounded-full before:bg-[#0f172a] before:content-[''] min-[992px]:block min-[992px]:translate-y-[30px] min-[992px]:rotate-5" role="img" aria-label="Stride training plan, week 6 of 12: easy run and intervals done, long run on Sunday">
      <div class="min-h-[560px] overflow-hidden rounded-[35px] bg-[#f8fafc] px-[18px] pt-[52px] pb-5 text-left text-[.8rem]">
        <p class="text-base font-extrabold">Week 6 of 12<span class="block text-[.74rem] font-medium text-[#475569]">10K plan, 3 runs a week</span></p>
        <ul class="mt-4 grid gap-2.5">
          <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><em class="grid size-[30px] flex-none place-items-center rounded-[10px] bg-[#c2410c] text-[.72rem] font-extrabold text-white not-italic">✓</em><div><b class="block">Easy run</b><span class="text-[.72rem] text-[#475569]">Tue · 30 min</span></div></li>
          <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><em class="grid size-[30px] flex-none place-items-center rounded-[10px] bg-[#c2410c] text-[.72rem] font-extrabold text-white not-italic">✓</em><div><b class="block">Intervals</b><span class="text-[.72rem] text-[#475569]">Thu · 6 × 400 m</span></div></li>
          <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><em class="grid size-[30px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-[.72rem] font-extrabold not-italic">Sun</em><div><b class="block">Long run</b><span class="text-[.72rem] text-[#475569]">Sun · 8 km</span></div></li>
          <li class="flex items-center gap-2.5 rounded-[14px] bg-white px-3 py-2.5 shadow-[0_1px_2px_rgba(15,23,42,.06)]"><em class="grid size-[30px] flex-none place-items-center rounded-[10px] bg-[#f1f5f9] text-[.72rem] font-extrabold not-italic">Mon</em><div><b class="block">Rest and stretch</b><span class="text-[.72rem] text-[#475569]">Mon · 15 min</span></div></li>
        </ul>
      </div>
    </div>
  </div>
</section></div>