Bento Grid Feature Sections in CSS, Bootstrap & Tailwind

<div><span class="lbl">Five-tile product bento</span>
<section class="bn" aria-labelledby="bn-notes">
  <div class="bn-head">
    <div>
      <p class="bn-eyebrow">Orbit Notes</p>
      <h2 class="bn-title" id="bn-notes">A notebook that keeps up with your head</h2>
      <p class="bn-lead">Five reasons people move ten years of notes into Orbit, and stay.</p>
    </div>
    <a href="#">Compare plans <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
  </div>
  <ul class="bn-grid">
    <li class="bn-tile bn-w4"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></span><h3>Search that reads your handwriting</h3><p>Scanned pages, whiteboard photos and tablet scribbles are searchable a few seconds after you save them.</p><div class="bn-art" aria-hidden="true"><div class="bn-search"><div class="bn-query"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>budget<i></i></div><div class="bn-res"><b>Q3 <span class="bn-hl">budget</span> review, whiteboard</b><small>Whiteboard photo · 12 Sep</small></div><div class="bn-res"><b>Hiring plan and <span class="bn-hl">budget</span> notes</b><small>Handwritten · tablet</small></div><div class="bn-res"><b>Offsite <span class="bn-hl">budget</span> and venues</b><small>Typed note · 3 Aug</small></div></div></div></li>
    <li class="bn-tile bn-w2"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg></span><h3>Offline first</h3><p>Every note is saved on the device and syncs in the background when you are back online.</p><div class="bn-art" aria-hidden="true"><span class="bn-sync">Synced 2 seconds ago</span></div></li>
    <li class="bn-tile bn-w2 bn-dark"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3>End-to-end encrypted</h3><p>Only your devices hold the keys. Not even our support team can open a notebook.</p><div class="bn-art" aria-hidden="true"><p class="bn-cipher">7f3a 91c0 e44b 2d18 0c9e b7a2 55f1 c03d</p></div></li>
    <li class="bn-tile bn-w3 bn-violet"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span><h3>Backlinks and a graph</h3><p>Mention a note and the link works both ways. The graph shows which ideas keep coming back.</p><div class="bn-art" aria-hidden="true"><div class="bn-graph"><svg viewBox="0 0 300 120" width="300" height="120" aria-hidden="true" focusable="false"><g fill="none" stroke="rgba(255,255,255,.45)" stroke-width="1.5"><path d="M40 70 110 30 190 52 260 22M110 30 150 96 190 52M40 70 150 96 240 92 260 22M190 52 240 92"/></g><g fill="#fff"><circle cx="40" cy="70" r="7"/><circle cx="110" cy="30" r="10"/><circle cx="190" cy="52" r="13"/><circle cx="260" cy="22" r="6"/><circle cx="150" cy="96" r="8"/><circle cx="240" cy="92" r="6"/></g><circle cx="190" cy="52" r="20" fill="none" stroke="#fff" stroke-opacity=".5"/></svg></div></div></li>
    <li class="bn-tile bn-w3 bn-lime"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span><h3>Templates for every meeting</h3><p>Start from a template your team agreed on, so every retro and interview note has the same shape.</p><div class="bn-art" aria-hidden="true"><div class="bn-tags"><span>One-to-one</span><span>Retro</span><span>Interview</span><span>Design review</span><span>Weekly plan</span><span>Lecture</span></div></div></li>
  </ul>
</section></div>

<div><span class="lbl">Metrics bento</span>
<section class="bn" aria-labelledby="bn-ci">
  <div class="bn-head">
    <div>
      <p class="bn-eyebrow">Pylon CI</p>
      <h2 class="bn-title" id="bn-ci">Builds you stop waiting for</h2>
      <p class="bn-lead">Median figures across 1,900 repositories that moved to Pylon in the last year.</p>
    </div>
  </div>
  <ul class="bn-grid">
    <li class="bn-tile bn-w3 bn-wide"><p class="bn-num">3.2×</p><h3>Faster builds with remote caching</h3><p>Unchanged packages are pulled from the cache instead of rebuilt, on every branch.</p>
      <div class="bn-art bn-bars"><div class="bn-bar"><span>Before Pylon <b>14 min 20 s</b></span><i style="--bn-w:100%"></i></div><div class="bn-bar"><span>With Pylon <b>4 min 30 s</b></span><i style="--bn-w:31%;--bn-c:#6d28d9"></i></div></div></li>
    <li class="bn-tile bn-w3 bn-wide"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3>Flaky tests, caught and quarantined</h3><p>Tests that pass and fail on the same commit are flagged, retried and kept from blocking a merge.</p>
      <ul class="bn-art bn-tests"><li>checkout.spec › applies coupon<span class="bn-st bn-st-warn">Flaky, 4 of 50 runs</span></li><li>auth.spec › refreshes token<span class="bn-st bn-st-mute">Quarantined</span></li><li>search.spec › empty query<span class="bn-st bn-st-ok">Fixed</span></li></ul></li>
    <li class="bn-tile bn-w2 bn-dark"><p class="bn-num">99.98%</p><h3>Uptime over 90 days</h3><p>One 11-minute incident on 3 August, written up in public.</p>
      <div class="bn-art bn-up" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="bn-warn"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></li>
    <li class="bn-tile bn-w2"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></span><h3>Runs in your cloud</h3><p>Use our runners or bring your own and keep source code inside your network.</p>
      <div class="bn-art bn-regions"><span>eu-west-1</span><span>us-east-2</span><span>ap-south-1</span><span>Your VPC</span></div></li>
    <li class="bn-tile bn-w2"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>SOC 2 Type II</h3><p>Audited every year by an independent firm. The full report is available under NDA.</p></li>
  </ul>
</section></div>

/* Bento grid feature sections: tiles of different sizes on a six-column CSS grid. Every tile is a list item
   with an h3 and a sentence; the small pictures inside are decoration (aria-hidden) because the text says it all.
   Two columns below 992px, one below 576px. */
.bn{--bn-ink:#18181b;--bn-muted:#52525b;--bn-accent:#6d28d9;--bn-tint:#ede9fe;--bn-line:#e4e4e7;--bn-tile:#fff;--bn-radius:22px;
  color:var(--bn-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.bn :where(h2,h3,p,ul){margin:0;padding:0}
.bn ul{list-style:none}
.bn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.bn-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bn-accent)}
.bn-title{margin-top:10px!important;max-width:18ch;font-size:clamp(1.8rem,1.2rem + 2.2vw,2.8rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.bn-lead{margin-top:12px!important;max-width:52ch;color:var(--bn-muted);font-size:1.05rem}
.bn-head a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--bn-ink);color:#fff;font-weight:650;text-decoration:none;font-size:.92rem;transition:background .2s}
.bn-head a:hover{background:var(--bn-accent)}
.bn-head a:focus-visible{outline:3px solid var(--bn-accent);outline-offset:3px}
.bn-head a svg{width:16px;height:16px}
.bn-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bn-tile{position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:26px;border:1px solid var(--bn-line);border-radius:var(--bn-radius);background:var(--bn-tile)}
.bn-tile h3{font-size:1.14rem;line-height:1.3;font-weight:750;letter-spacing:-.01em}
.bn-tile p{color:var(--bn-muted);font-size:.96rem}
.bn-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:12px;background:var(--bn-tint);color:var(--bn-accent)}
.bn-ico svg{width:22px;height:22px}
.bn-art{margin-top:auto;padding-top:18px}
.bn-w4{grid-column:span 4;grid-row:span 2}
.bn-w3{grid-column:span 3}
.bn-w2{grid-column:span 2}
/* tile themes */
.bn-dark{--bn-tile:#18181b;--bn-line:#18181b;color:#fafafa}
.bn-dark p{color:#a1a1aa}
.bn-dark .bn-ico{background:#27272a;color:#c4b5fd}
.bn-violet{--bn-line:transparent;background:linear-gradient(140deg,#4c1d95,#6d28d9 60%,#7c3aed);color:#fff}
.bn-violet p{color:#ede9fe}
.bn-violet .bn-ico{background:rgba(255,255,255,.16);color:#fff}
.bn-lime{--bn-tile:#d9f99d;--bn-line:#d9f99d;color:#1a2e05}
.bn-lime p{color:#365314}
.bn-lime .bn-ico{background:#1a2e05;color:#d9f99d}
/* pictures */
.bn-search{border:1px solid var(--bn-line);border-radius:16px;background:#fafafa;overflow:hidden}
.bn-query{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--bn-line);font-weight:600}
.bn-query svg{width:18px;height:18px;color:var(--bn-muted)}
.bn-query i{width:2px;height:18px;background:var(--bn-accent)}
.bn-res{display:grid;gap:2px;padding:12px 14px;border-bottom:1px solid #f0f0f2}
.bn-res:last-child{border-bottom:0}
.bn-res b{font-weight:600;font-size:.94rem}
.bn-res small{color:var(--bn-muted);font-size:.8rem}
.bn-hl{padding:0 3px;border-radius:4px;background:#fde68a}
.bn-sync{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f4f4f5;font-size:.86rem;font-weight:600}
.bn-sync::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px #dcfce7}
.bn-tile .bn-cipher{font:500 .8rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#a1a1aa;word-break:break-all}
.bn-graph svg{display:block;width:100%;height:auto;max-width:340px}
.bn-tags{display:flex;flex-wrap:wrap;gap:8px}
.bn-tags span{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #bef264;font-size:.84rem;font-weight:600}
/* second grid: metrics */
.bn-tile .bn-num{font-size:clamp(2.6rem,2rem + 2vw,3.6rem);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--bn-accent)}
.bn-bars{display:grid;gap:12px}
.bn-bar{display:grid;gap:6px;font-size:.86rem}
.bn-bar span{display:flex;justify-content:space-between;gap:10px;color:var(--bn-muted)}
.bn-bar b{color:var(--bn-ink);font-weight:650}
.bn-bar i{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--bn-c,#a1a1aa) var(--bn-w),#f4f4f5 0)}
.bn-tests{display:grid;gap:8px}
.bn-tests li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 12px;border-radius:12px;background:#fafafa;border:1px solid #f0f0f2;
  font:500 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.bn-st{padding:3px 9px;border-radius:99px;font:700 .74rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.bn-st-warn{background:#fef3c7;color:#92400e}
.bn-st-mute{background:#e4e4e7;color:#3f3f46}
.bn-st-ok{background:#dcfce7;color:#166534}
.bn-up{display:flex;gap:3px;height:48px}
.bn-up i{flex:1;border-radius:3px;background:#a78bfa}
.bn-up i.bn-warn{background:#f59e0b;height:60%;align-self:flex-end}
.bn-regions{display:flex;flex-wrap:wrap;gap:6px}
.bn-regions span{padding:5px 10px;border-radius:8px;background:#f4f4f5;font:600 .8rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.bn-dark .bn-num.bn-num{color:#c4b5fd}
@media (max-width:991px){
  .bn-grid{grid-template-columns:repeat(2,1fr)}
  .bn-w4,.bn-wide{grid-column:span 2;grid-row:auto}
  .bn-w3,.bn-w2{grid-column:span 1}
  .bn-w3.bn-wide{grid-column:span 2}
}
@media (max-width:575px){
  .bn-grid{grid-template-columns:1fr}
  .bn-w4,.bn-w3,.bn-w2,.bn-wide,.bn-w3.bn-wide{grid-column:auto}
  .bn-tile{padding:22px}
}
@media (prefers-reduced-motion:reduce){.bn-head a{transition:none}}

<div><span class="lbl">Five-tile product bento</span>
<section class="bn" aria-labelledby="b-bn-notes">
  <div class="bn-head">
    <div>
      <p class="bn-eyebrow">Orbit Notes</p>
      <h2 class="bn-title" id="b-bn-notes">A notebook that keeps up with your head</h2>
      <p class="bn-lead">Five reasons people move ten years of notes into Orbit, and stay.</p>
    </div>
    <a href="#">Compare plans <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
  </div>
  <ul class="row g-3 list-unstyled mb-0">
    <li class="col-lg-8"><div class="card  h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></span><h3>Search that reads your handwriting</h3><p>Scanned pages, whiteboard photos and tablet scribbles are searchable a few seconds after you save them.</p><div class="bn-art" aria-hidden="true"><div class="bn-search"><div class="bn-query"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>budget<i></i></div><div class="bn-res"><b>Q3 <span class="bn-hl">budget</span> review, whiteboard</b><small>Whiteboard photo · 12 Sep</small></div><div class="bn-res"><b>Hiring plan and <span class="bn-hl">budget</span> notes</b><small>Handwritten · tablet</small></div><div class="bn-res"><b>Offsite <span class="bn-hl">budget</span> and venues</b><small>Typed note · 3 Aug</small></div></div></div></div></div></li>
    <li class="col-lg-4"><ul class="row g-3 list-unstyled h-100">
      <li class="col-sm-6 col-lg-12"><div class="card  h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg></span><h3>Offline first</h3><p>Every note is saved on the device and syncs in the background when you are back online.</p><div class="bn-art" aria-hidden="true"><span class="bn-sync">Synced 2 seconds ago</span></div></div></div></li>
      <li class="col-sm-6 col-lg-12"><div class="card bn-dark h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3>End-to-end encrypted</h3><p>Only your devices hold the keys. Not even our support team can open a notebook.</p><div class="bn-art" aria-hidden="true"><p class="bn-cipher">7f3a 91c0 e44b 2d18 0c9e b7a2 55f1 c03d</p></div></div></div></li>
    </ul></li>
    <li class="col-sm-6"><div class="card bn-violet h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span><h3>Backlinks and a graph</h3><p>Mention a note and the link works both ways. The graph shows which ideas keep coming back.</p><div class="bn-art" aria-hidden="true"><div class="bn-graph"><svg viewBox="0 0 300 120" width="300" height="120" aria-hidden="true" focusable="false"><g fill="none" stroke="rgba(255,255,255,.45)" stroke-width="1.5"><path d="M40 70 110 30 190 52 260 22M110 30 150 96 190 52M40 70 150 96 240 92 260 22M190 52 240 92"/></g><g fill="#fff"><circle cx="40" cy="70" r="7"/><circle cx="110" cy="30" r="10"/><circle cx="190" cy="52" r="13"/><circle cx="260" cy="22" r="6"/><circle cx="150" cy="96" r="8"/><circle cx="240" cy="92" r="6"/></g><circle cx="190" cy="52" r="20" fill="none" stroke="#fff" stroke-opacity=".5"/></svg></div></div></div></div></li>
    <li class="col-sm-6"><div class="card bn-lime h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span><h3>Templates for every meeting</h3><p>Start from a template your team agreed on, so every retro and interview note has the same shape.</p><div class="bn-art" aria-hidden="true"><div class="bn-tags"><span>One-to-one</span><span>Retro</span><span>Interview</span><span>Design review</span><span>Weekly plan</span><span>Lecture</span></div></div></div></div></li>
  </ul>
</section></div>

<div><span class="lbl">Metrics bento</span>
<section class="bn" aria-labelledby="b-bn-ci">
  <div class="bn-head">
    <div>
      <p class="bn-eyebrow">Pylon CI</p>
      <h2 class="bn-title" id="b-bn-ci">Builds you stop waiting for</h2>
      <p class="bn-lead">Median figures across 1,900 repositories that moved to Pylon in the last year.</p>
    </div>
  </div>
  <ul class="row g-3 list-unstyled mb-0">
    <li class="col-lg-6"><div class="card h-100"><div class="card-body bn-tile"><p class="bn-num">3.2×</p><h3>Faster builds with remote caching</h3><p>Unchanged packages are pulled from the cache instead of rebuilt, on every branch.</p>
      <div class="bn-art bn-bars"><div class="bn-bar"><span>Before Pylon <b>14 min 20 s</b></span><i style="--bn-w:100%"></i></div><div class="bn-bar"><span>With Pylon <b>4 min 30 s</b></span><i style="--bn-w:31%;--bn-c:#6d28d9"></i></div></div></div></div></li>
    <li class="col-lg-6"><div class="card h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3>Flaky tests, caught and quarantined</h3><p>Tests that pass and fail on the same commit are flagged, retried and kept from blocking a merge.</p>
      <ul class="bn-art bn-tests"><li>checkout.spec › applies coupon<span class="badge rounded-pill bn-st bn-st-warn">Flaky, 4 of 50 runs</span></li><li>auth.spec › refreshes token<span class="badge rounded-pill bn-st bn-st-mute">Quarantined</span></li><li>search.spec › empty query<span class="badge rounded-pill bn-st bn-st-ok">Fixed</span></li></ul></div></div></li>
    <li class="col-sm-6 col-lg-4"><div class="card bn-dark h-100"><div class="card-body bn-tile"><p class="bn-num">99.98%</p><h3>Uptime over 90 days</h3><p>One 11-minute incident on 3 August, written up in public.</p>
      <div class="bn-art bn-up" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="bn-warn"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div></div></li>
    <li class="col-sm-6 col-lg-4"><div class="card h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></span><h3>Runs in your cloud</h3><p>Use our runners or bring your own and keep source code inside your network.</p>
      <div class="bn-art bn-regions"><span>eu-west-1</span><span>us-east-2</span><span>ap-south-1</span><span>Your VPC</span></div></div></div></li>
    <li class="col-sm-6 col-lg-4"><div class="card h-100"><div class="card-body bn-tile"><span class="bn-ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>SOC 2 Type II</h3><p>Audited every year by an independent firm. The full report is available under NDA.</p></div></div></li>
  </ul>
</section></div>

/* Bento grid feature sections: tiles of different sizes on a six-column CSS grid. Every tile is a list item
   with an h3 and a sentence; the small pictures inside are decoration (aria-hidden) because the text says it all.
   Two columns below 992px, one below 576px. */
.bn{--bn-ink:#18181b;--bn-muted:#52525b;--bn-accent:#6d28d9;--bn-tint:#ede9fe;--bn-line:#e4e4e7;--bn-tile:#fff;--bn-radius:22px;
  color:var(--bn-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.bn :where(h2,h3,p){margin:0}
.bn .bn-tests{margin:0;padding-left:0;list-style:none}
.bn-head a:focus-visible{box-shadow:none}
.bn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.bn-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bn-accent)}
.bn-title{margin-top:10px!important;max-width:18ch;font-size:clamp(1.8rem,1.2rem + 2.2vw,2.8rem);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.bn-lead{margin-top:12px!important;max-width:52ch;color:var(--bn-muted);font-size:1.05rem}
.bn-head a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--bn-ink);color:#fff;font-weight:650;text-decoration:none;font-size:.92rem;transition:background .2s}
.bn-head a:hover{background:var(--bn-accent)}
.bn-head a:focus-visible{outline:3px solid var(--bn-accent);outline-offset:3px}
.bn-head a svg{width:16px;height:16px}
.bn .card{--bs-card-bg:var(--bn-tile);--bs-card-border-color:var(--bn-line);--bs-card-border-radius:var(--bn-radius);--bs-card-color:inherit;overflow:hidden}
.bn .bn-tile{display:flex;flex-direction:column;gap:8px;padding:26px}
.bn-tile h3{font-size:1.14rem;line-height:1.3;font-weight:750;letter-spacing:-.01em}
.bn-tile p{color:var(--bn-muted);font-size:.96rem}
.bn-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:12px;background:var(--bn-tint);color:var(--bn-accent)}
.bn-ico svg{width:22px;height:22px}
.bn-art{margin-top:auto;padding-top:18px}
/* tile themes */
.bn-dark{--bn-tile:#18181b;--bn-line:#18181b;color:#fafafa}
.bn-dark p{color:#a1a1aa}
.bn-dark .bn-ico{background:#27272a;color:#c4b5fd}
.bn-violet{--bn-line:transparent;background:linear-gradient(140deg,#4c1d95,#6d28d9 60%,#7c3aed);color:#fff}
.bn-violet p{color:#ede9fe}
.bn-violet .bn-ico{background:rgba(255,255,255,.16);color:#fff}
.bn-lime{--bn-tile:#d9f99d;--bn-line:#d9f99d;color:#1a2e05}
.bn-lime p{color:#365314}
.bn-lime .bn-ico{background:#1a2e05;color:#d9f99d}
/* pictures */
.bn-search{border:1px solid var(--bn-line);border-radius:16px;background:#fafafa;overflow:hidden}
.bn-query{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--bn-line);font-weight:600}
.bn-query svg{width:18px;height:18px;color:var(--bn-muted)}
.bn-query i{width:2px;height:18px;background:var(--bn-accent)}
.bn-res{display:grid;gap:2px;padding:12px 14px;border-bottom:1px solid #f0f0f2}
.bn-res:last-child{border-bottom:0}
.bn-res b{font-weight:600;font-size:.94rem}
.bn-res small{color:var(--bn-muted);font-size:.8rem}
.bn-hl{padding:0 3px;border-radius:4px;background:#fde68a}
.bn-sync{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f4f4f5;font-size:.86rem;font-weight:600}
.bn-sync::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px #dcfce7}
.bn-tile .bn-cipher{font:500 .8rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#a1a1aa;word-break:break-all}
.bn-graph svg{display:block;width:100%;height:auto;max-width:340px}
.bn-tags{display:flex;flex-wrap:wrap;gap:8px}
.bn-tags span{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #bef264;font-size:.84rem;font-weight:600}
/* second grid: metrics */
.bn-tile .bn-num{font-size:clamp(2.6rem,2rem + 2vw,3.6rem);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--bn-accent)}
.bn-bars{display:grid;gap:12px}
.bn-bar{display:grid;gap:6px;font-size:.86rem}
.bn-bar span{display:flex;justify-content:space-between;gap:10px;color:var(--bn-muted)}
.bn-bar b{color:var(--bn-ink);font-weight:650}
.bn-bar i{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--bn-c,#a1a1aa) var(--bn-w),#f4f4f5 0)}
.bn-tests{display:grid;gap:8px}
.bn-tests li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 12px;border-radius:12px;background:#fafafa;border:1px solid #f0f0f2;
  font:500 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.bn-st{padding:3px 9px;border-radius:99px;font:700 .74rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.bn-st-warn{background:#fef3c7;color:#92400e}
.bn-st-mute{background:#e4e4e7;color:#3f3f46}
.bn-st-ok{background:#dcfce7;color:#166534}
.bn-up{display:flex;gap:3px;height:48px}
.bn-up i{flex:1;border-radius:3px;background:#a78bfa}
.bn-up i.bn-warn{background:#f59e0b;height:60%;align-self:flex-end}
.bn-regions{display:flex;flex-wrap:wrap;gap:6px}
.bn-regions span{padding:5px 10px;border-radius:8px;background:#f4f4f5;font:600 .8rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.bn-dark .bn-num.bn-num{color:#c4b5fd}
@media (max-width:575px){.bn .bn-tile{padding:22px}}
@media (prefers-reduced-motion:reduce){.bn-head a{transition:none}}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#52525b] uppercase">Five-tile product bento</span>
<section class="leading-normal text-[#18181b]" aria-labelledby="t-bn-notes">
  <div class="mb-8 flex flex-wrap items-end justify-between gap-x-8 gap-y-4">
    <div>
      <p class="text-[.8rem] font-bold tracking-[.12em] text-[#6d28d9] uppercase">Orbit Notes</p>
      <h2 class="mt-2.5 max-w-[18ch] text-[clamp(1.8rem,1.2rem+2.2vw,2.8rem)] leading-[1.08] font-extrabold tracking-[-.03em]" id="t-bn-notes">A notebook that keeps up with your head</h2>
      <p class="mt-3 max-w-[52ch] text-[1.05rem] text-[#52525b]">Five reasons people move ten years of notes into Orbit, and stay.</p>
    </div>
    <a class="inline-flex items-center gap-1.5 rounded-full bg-[#18181b] px-4 py-2.5 text-[.92rem] font-[650] text-white transition-colors duration-200 hover:bg-[#6d28d9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#6d28d9] motion-reduce:transition-none" href="#">Compare plans <svg class="size-4" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
  </div>
  <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white sm:col-span-2 lg:col-span-4 lg:row-span-2"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#ede9fe] text-[#6d28d9]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Search that reads your handwriting</h3><p class="text-[.96rem] text-[#52525b]">Scanned pages, whiteboard photos and tablet scribbles are searchable a few seconds after you save them.</p><div class="mt-auto pt-[18px]" aria-hidden="true"><div class="overflow-hidden rounded-2xl border border-[#e4e4e7] bg-[#fafafa]"><div class="flex items-center gap-2.5 border-b border-[#e4e4e7] bg-white px-3.5 py-3 font-semibold"><svg class="size-[18px] text-[#52525b]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>budget<i class="h-[18px] w-0.5 bg-[#6d28d9]"></i></div><div class="grid gap-0.5 border-b border-[#f0f0f2] px-3.5 py-3 last:border-b-0"><b class="text-[.94rem] font-semibold">Q3 <span class="rounded px-[3px] bg-[#fde68a]">budget</span> review, whiteboard</b><small class="text-[.8rem] text-[#52525b]">Whiteboard photo · 12 Sep</small></div><div class="grid gap-0.5 border-b border-[#f0f0f2] px-3.5 py-3 last:border-b-0"><b class="text-[.94rem] font-semibold">Hiring plan and <span class="rounded px-[3px] bg-[#fde68a]">budget</span> notes</b><small class="text-[.8rem] text-[#52525b]">Handwritten · tablet</small></div><div class="grid gap-0.5 border-b border-[#f0f0f2] px-3.5 py-3 last:border-b-0"><b class="text-[.94rem] font-semibold">Offsite <span class="rounded px-[3px] bg-[#fde68a]">budget</span> and venues</b><small class="text-[.8rem] text-[#52525b]">Typed note · 3 Aug</small></div></div></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white lg:col-span-2"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#ede9fe] text-[#6d28d9]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Offline first</h3><p class="text-[.96rem] text-[#52525b]">Every note is saved on the device and syncs in the background when you are back online.</p><div class="mt-auto pt-[18px]" aria-hidden="true"><span class="inline-flex items-center gap-2 rounded-full bg-[#f4f4f5] px-3 py-2 text-[.86rem] font-semibold before:size-2 before:rounded-full before:bg-[#16a34a] before:shadow-[0_0_0_4px_#dcfce7] before:content-['']">Synced 2 seconds ago</span></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#18181b] bg-[#18181b] text-[#fafafa] lg:col-span-2"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#27272a] text-[#c4b5fd]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">End-to-end encrypted</h3><p class="text-[.96rem] text-[#a1a1aa]">Only your devices hold the keys. Not even our support team can open a notebook.</p><div class="mt-auto pt-[18px]" aria-hidden="true"><p class="font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] leading-[1.6] font-medium break-all text-[#a1a1aa]">7f3a 91c0 e44b 2d18 0c9e b7a2 55f1 c03d</p></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-transparent bg-linear-[140deg] from-[#4c1d95] via-[#6d28d9] via-60% to-[#7c3aed] text-white lg:col-span-3"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-white/16 text-white"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Backlinks and a graph</h3><p class="text-[.96rem] text-[#ede9fe]">Mention a note and the link works both ways. The graph shows which ideas keep coming back.</p><div class="mt-auto pt-[18px]" aria-hidden="true"><svg class="block h-auto w-full max-w-[340px]" viewBox="0 0 300 120" width="300" height="120" aria-hidden="true" focusable="false"><g fill="none" stroke="rgba(255,255,255,.45)" stroke-width="1.5"><path d="M40 70 110 30 190 52 260 22M110 30 150 96 190 52M40 70 150 96 240 92 260 22M190 52 240 92"/></g><g fill="#fff"><circle cx="40" cy="70" r="7"/><circle cx="110" cy="30" r="10"/><circle cx="190" cy="52" r="13"/><circle cx="260" cy="22" r="6"/><circle cx="150" cy="96" r="8"/><circle cx="240" cy="92" r="6"/></g><circle cx="190" cy="52" r="20" fill="none" stroke="#fff" stroke-opacity=".5"/></svg></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#d9f99d] bg-[#d9f99d] text-[#1a2e05] lg:col-span-3"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#1a2e05] text-[#d9f99d]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Templates for every meeting</h3><p class="text-[.96rem] text-[#365314]">Start from a template your team agreed on, so every retro and interview note has the same shape.</p><div class="mt-auto pt-[18px]" aria-hidden="true"><div class="flex flex-wrap gap-2"><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">One-to-one</span><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">Retro</span><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">Interview</span><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">Design review</span><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">Weekly plan</span><span class="rounded-full border border-[#bef264] bg-white px-3 py-1.5 text-[.84rem] font-semibold">Lecture</span></div></div></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#52525b] uppercase">Metrics bento</span>
<section class="leading-normal text-[#18181b]" aria-labelledby="t-bn-ci">
  <div class="mb-8 flex flex-wrap items-end justify-between gap-x-8 gap-y-4">
    <div>
      <p class="text-[.8rem] font-bold tracking-[.12em] text-[#6d28d9] uppercase">Pylon CI</p>
      <h2 class="mt-2.5 max-w-[18ch] text-[clamp(1.8rem,1.2rem+2.2vw,2.8rem)] leading-[1.08] font-extrabold tracking-[-.03em]" id="t-bn-ci">Builds you stop waiting for</h2>
      <p class="mt-3 max-w-[52ch] text-[1.05rem] text-[#52525b]">Median figures across 1,900 repositories that moved to Pylon in the last year.</p>
    </div>
  </div>
  <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white sm:col-span-2 lg:col-span-3"><p class="text-[clamp(2.6rem,2rem+2vw,3.6rem)] leading-none font-extrabold tracking-[-.04em] text-[#6d28d9]">3.2×</p><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Faster builds with remote caching</h3><p class="text-[.96rem] text-[#52525b]">Unchanged packages are pulled from the cache instead of rebuilt, on every branch.</p>
      <div class="mt-auto pt-[18px] grid gap-3"><div class="grid gap-1.5 text-[.86rem]"><span class="flex justify-between gap-2.5 text-[#52525b]">Before Pylon <b class="font-[650] text-[#18181b]">14 min 20 s</b></span><i class="h-2.5 rounded-full bg-[#f4f4f5]"><i class="block h-full rounded-full bg-[#a1a1aa]" style="width:100%"></i></i></div><div class="grid gap-1.5 text-[.86rem]"><span class="flex justify-between gap-2.5 text-[#52525b]">With Pylon <b class="font-[650] text-[#18181b]">4 min 30 s</b></span><i class="h-2.5 rounded-full bg-[#f4f4f5]"><i class="block h-full rounded-full bg-[#6d28d9]" style="width:31%"></i></i></div></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white sm:col-span-2 lg:col-span-3"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#ede9fe] text-[#6d28d9]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Flaky tests, caught and quarantined</h3><p class="text-[.96rem] text-[#52525b]">Tests that pass and fail on the same commit are flagged, retried and kept from blocking a merge.</p>
      <ul class="mt-auto pt-[18px] grid gap-2"><li class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 rounded-xl border border-[#f0f0f2] bg-[#fafafa] px-3 py-2.5 font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.82rem] leading-[1.4] font-medium">checkout.spec › applies coupon<span class="rounded-full px-[9px] py-[3px] font-sans text-[.74rem] font-bold bg-[#fef3c7] text-[#92400e]">Flaky, 4 of 50 runs</span></li><li class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 rounded-xl border border-[#f0f0f2] bg-[#fafafa] px-3 py-2.5 font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.82rem] leading-[1.4] font-medium">auth.spec › refreshes token<span class="rounded-full px-[9px] py-[3px] font-sans text-[.74rem] font-bold bg-[#e4e4e7] text-[#3f3f46]">Quarantined</span></li><li class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 rounded-xl border border-[#f0f0f2] bg-[#fafafa] px-3 py-2.5 font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.82rem] leading-[1.4] font-medium">search.spec › empty query<span class="rounded-full px-[9px] py-[3px] font-sans text-[.74rem] font-bold bg-[#dcfce7] text-[#166534]">Fixed</span></li></ul></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#18181b] bg-[#18181b] text-[#fafafa] lg:col-span-2"><p class="text-[clamp(2.6rem,2rem+2vw,3.6rem)] leading-none font-extrabold tracking-[-.04em] text-[#c4b5fd]">99.98%</p><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Uptime over 90 days</h3><p class="text-[.96rem] text-[#a1a1aa]">One 11-minute incident on 3 August, written up in public.</p>
      <div class="mt-auto pt-[18px] flex h-[calc(30px+18px)] gap-[3px]" aria-hidden="true"><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="h-[60%] flex-1 self-end rounded-[3px] bg-[#f59e0b]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i><i class="flex-1 rounded-[3px] bg-[#a78bfa]"></i></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white lg:col-span-2"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#ede9fe] text-[#6d28d9]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">Runs in your cloud</h3><p class="text-[.96rem] text-[#52525b]">Use our runners or bring your own and keep source code inside your network.</p>
      <div class="mt-auto pt-[18px] flex flex-wrap gap-1.5"><span class="rounded-lg bg-[#f4f4f5] px-2.5 py-[5px] font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold">eu-west-1</span><span class="rounded-lg bg-[#f4f4f5] px-2.5 py-[5px] font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold">us-east-2</span><span class="rounded-lg bg-[#f4f4f5] px-2.5 py-[5px] font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold">ap-south-1</span><span class="rounded-lg bg-[#f4f4f5] px-2.5 py-[5px] font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.8rem] font-semibold">Your VPC</span></div></li>
    <li class="relative flex flex-col gap-2 overflow-hidden rounded-[22px] border p-[22px] sm:p-[26px] border-[#e4e4e7] bg-white lg:col-span-2"><span class="mb-2 grid size-10 place-items-center rounded-xl bg-[#ede9fe] text-[#6d28d9]"><svg class="size-[22px]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3 class="text-[1.14rem] leading-[1.3] font-[750] tracking-[-.01em]">SOC 2 Type II</h3><p class="text-[.96rem] text-[#52525b]">Audited every year by an independent firm. The full report is available under NDA.</p></li>
  </ul>
</section></div>