Modern CSS Feature Sections in CSS, Bootstrap & Tailwind

<div><span class="lbl">Subgrid: titles, text and links line up across cards</span>
<section class="mx" aria-labelledby="mx-sub">
  <p class="mx-eyebrow">Mise kitchen software</p>
  <h2 class="mx-title" id="mx-sub">Run the kitchen, not the spreadsheets</h2>
  <ul class="mx-sub">
    <li><span class="mx-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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3>Recipe costing</h3><p>Every dish priced from your latest supplier invoices.</p><a class="mx-more" href="#">See recipe costing <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></li>
    <li><span class="mx-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 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Supplier price alerts when a case of olive oil goes up</h3><p>A note on your phone the morning a supplier raises a price, with the dishes it affects and by how much.</p><a class="mx-more" href="#">Set up price alerts <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></li>
    <li><span class="mx-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>Allergen matrix</h3><p>The 14 major allergens tracked per ingredient and rolled up to every dish, ready to print for front of house.</p><a class="mx-more" href="#">View a sample matrix <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></li>
  </ul>
</section></div>

<div><span class="lbl">Container query card, shown in a wide and a narrow slot</span>
<section class="mx" aria-labelledby="mx-cq">
  <p class="mx-eyebrow">One component, two widths</p>
  <h2 class="mx-title" id="mx-cq">Plate costs at a glance</h2>
  <div class="slots">
    <div class="mx-slot">
      <article class="mx-card" aria-labelledby="mx-card-wide">
        <div class="mx-viz" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="mx-donut"><b>28%<small>food cost</small></b></span><ul class="mx-legend"><li style="--mx-sw:#be123c">Ingredients<b>28%</b></li><li style="--mx-sw:#fb7185">Prep time<b>18%</b></li><li style="--mx-sw:#fecdd3">Margin<b>54%</b></li></ul><p class="mx-dish">Lamb shoulder · £24</p></div>
        <div>
          <h3 id="mx-card-wide">Know the cost of every plate</h3>
          <p>Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mx-points"><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
    <div class="mx-slot">
      <article class="mx-card" aria-labelledby="mx-card-narrow">
        <div class="mx-viz" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="mx-donut"><b>28%<small>food cost</small></b></span><ul class="mx-legend"><li style="--mx-sw:#be123c">Ingredients<b>28%</b></li><li style="--mx-sw:#fb7185">Prep time<b>18%</b></li><li style="--mx-sw:#fecdd3">Margin<b>54%</b></li></ul><p class="mx-dish">Lamb shoulder · £24</p></div>
        <div>
          <h3 id="mx-card-narrow">Know the cost of every plate</h3>
          <p>Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mx-points"><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
  </div>
</section></div>

<div><span class="lbl">:has() feature tabs: a radio group, no JavaScript</span>
<section class="mx mx-tabs" aria-labelledby="mx-tabs">
  <p class="mx-eyebrow">Interactive without JavaScript</p>
  <h2 class="mx-title" id="mx-tabs">Everything the pass needs, on one screen</h2>
  <div class="mx-tablist" role="radiogroup" aria-label="Choose a feature">
    <label class="mx-tab"><input type="radio" name="mx-feature" id="mx-t-orders" aria-controls="mx-p-orders" checked><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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>Orders</label>
    <label class="mx-tab"><input type="radio" name="mx-feature" id="mx-t-stock" aria-controls="mx-p-stock"><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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Stock</label>
    <label class="mx-tab"><input type="radio" name="mx-feature" id="mx-t-rota" aria-controls="mx-p-rota"><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="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Rota</label>
    <label class="mx-tab"><input type="radio" name="mx-feature" id="mx-t-costs" aria-controls="mx-p-costs"><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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg>Costs</label>
  </div>
  <div class="mx-panel" id="mx-p-orders">
    <div><h3>Tickets in the order they were fired</h3><p>New orders appear on the pass tablet the moment a server sends them, with table, covers and how long each has waited.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Table 12</b><span>4 covers · 6 min</span></li><li><b>Table 4</b><span>2 covers · 11 min</span><em>Late</em></li><li><b>Takeaway 88</b><span>3 items · 2 min</span></li></ul>
  </div>
  <div class="mx-panel" id="mx-p-stock">
    <div><h3>Par levels that reorder themselves</h3><p>Set a par for each item. When a count drops below it, the item goes onto the next supplier order for you to approve.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Olive oil</b><span>4 of 20 L</span><em>Reorder</em><i style="--mx-l:20%"></i></li><li><b>Plain flour</b><span>18 of 25 kg</span><i style="--mx-l:72%"></i></li><li><b>Double cream</b><span>6 of 12 L</span><i style="--mx-l:50%"></i></li></ul>
  </div>
  <div class="mx-panel" id="mx-p-rota">
    <div><h3>A rota that respects contracts</h3><p>Build next week from last week, and Mise warns you before anyone goes over their contracted hours or misses a break.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Mon</b><span>Ana, Tom, Raj</span></li><li><b>Tue</b><span>Ana, Lee, Raj</span></li><li><b>Wed</b><span>Tom, Lee, Sam</span></li><li><b>Thu</b><span>Ana, Tom, Sam</span></li></ul>
  </div>
  <div class="mx-panel" id="mx-p-costs">
    <div><h3>Gross profit, every morning</h3><p>Yesterday's sales and deliveries are matched overnight, so the food cost is waiting when you open the laptop.</p></div>
    <ul class="mx-shot mx-big" aria-hidden="true"><li><b>28.4%</b><span>Food cost</span></li><li><b>30.0%</b><span>Target</span></li><li><b>212</b><span>Covers</span></li></ul>
  </div>
</section></div>

<div><span class="lbl">Scroll-driven reveal, static where unsupported</span>
<section class="mx" aria-labelledby="mx-reveal">
  <p class="mx-eyebrow">Scroll down</p>
  <h2 class="mx-title" id="mx-reveal">Built for the way kitchens work</h2>
  <ul class="mx-grid">
    <li><span class="mx-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="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><h3>Prep lists by 7am</h3><p>Generated from tonight's covers and what is already in the walk-in.</p></li>
    <li><span class="mx-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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3>Rotas that fit contracts</h3><p>Hours, breaks and rest days checked as you build the week.</p></li>
    <li><span class="mx-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 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span><h3>One-tap supplier orders</h3><p>Approve the suggested order and it goes to each supplier in their format.</p></li>
    <li><span class="mx-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="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><h3>Made for the pass tablet</h3><p>Big targets, high contrast and no tiny menus for greasy fingers.</p></li>
    <li><span class="mx-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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><h3>Temperature logs</h3><p>Fridge and probe readings stored with a timestamp for every inspection.</p></li>
    <li><span class="mx-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="m23 6-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg></span><h3>A weekly GP report</h3><p>Gross profit by dish and by day, emailed to the owner every Monday.</p></li>
  </ul>
</section></div>

/* Modern CSS feature sections, no JavaScript:
   - subgrid: each card spans four rows of the parent grid (icon, title, text, link), so titles and links line up
     across cards whatever the copy length; without subgrid the cards fall back to flex columns;
   - container queries: the feature card lays itself out by the width of its slot, not the window;
   - :has(): a radio group switches the feature panels, styled with label:has(:checked); without :has() every
     panel is shown, one under another;
   - scroll-driven animation: cards rise into place as they enter the viewport (animation-timeline: view()),
     only inside @supports and when the visitor has not asked for reduced motion. */
.mx{--mx-ink:#1f1724;--mx-muted:#5b4d63;--mx-accent:#be123c;--mx-accent-hover:#9f1239;--mx-tint:#ffe4e6;--mx-soft:#fff1f2;--mx-line:#eadfe3;--mx-bg:#fffafb;--mx-radius:28px;
  background:var(--mx-bg);color:var(--mx-ink);border-radius:var(--mx-radius);padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.mx :where(h2,h3,p,ul){margin:0;padding:0}
.mx ul{list-style:none}
.mx a{color:var(--mx-accent);font-weight:650;text-decoration:none}
.mx a:hover{color:var(--mx-accent-hover)}
.mx a:focus-visible{outline:3px solid var(--mx-accent);outline-offset:3px;border-radius:6px}
.mx-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-accent)}
.mx-title{margin-top:12px!important;font-size:clamp(1.8rem,1.2rem + 2.2vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
.mx h3{font-size:1.1rem;line-height:1.3;font-weight:750;text-wrap:balance}
.mx-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mx-tint);color:var(--mx-accent)}
.mx-ico svg{width:23px;height:23px}
.mx-more{display:inline-flex;align-items:center;gap:6px;font-size:.94rem}
.mx-more svg{width:16px;height:16px}
/* 1. subgrid */
.mx-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px!important}
.mx-sub li{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px;border:1px solid var(--mx-line);border-radius:20px;background:#fff}
.mx-sub p{color:var(--mx-muted)}
@supports (grid-template-rows:subgrid){
  .mx-sub li{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:start;justify-items:start}
  .mx-sub .mx-more{align-self:end}
}
/* 2. container query card */
.mx-slot{container:mx-slot / inline-size}
.mx-card{display:grid;gap:22px;padding:22px;border:1px solid var(--mx-line);border-radius:22px;background:#fff}
.mx-viz{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:18px;border-radius:16px;background:var(--mx-soft)}
.mx-donut{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 52%,transparent 53%),conic-gradient(#be123c 0 28%,#fb7185 0 46%,#fecdd3 0)}
.mx-donut b{font-size:1.15rem;line-height:1;text-align:center}
.mx-donut small{display:block;font-size:.66rem;font-weight:600;color:var(--mx-muted)}
.mx-legend{display:grid;gap:6px;font-size:.86rem}
.mx-legend li{display:flex;align-items:center;gap:8px}
.mx-legend li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--mx-sw);box-shadow:inset 0 0 0 1px rgba(31,23,36,.15)}
.mx-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.mx-dish{grid-column:1 / -1;font-size:.8rem;font-weight:700;color:var(--mx-muted)}
.mx-card h3+p{margin-top:8px;color:var(--mx-muted)}
.mx-points{display:grid;gap:8px;margin-top:16px!important;font-size:.94rem}
.mx-points li{display:flex;gap:8px;align-items:flex-start}
.mx-points svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--mx-accent)}
@container mx-slot (min-width:560px){
  .mx-card{grid-template-columns:260px 1fr;align-items:center;gap:32px;padding:28px}
  .mx-viz{grid-template-columns:1fr;justify-items:center;text-align:center}
  .mx-legend{width:100%;text-align:left}
}
@container mx-slot (min-width:760px){
  .mx-points{grid-template-columns:1fr 1fr;column-gap:20px}
}
/* 3. :has() feature tabs */
.mx-tablist{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:6px;margin-top:32px;padding:6px;border-radius:16px;background:var(--mx-tint);width:fit-content;max-width:100%}
.mx-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;color:#7f1d3a;font-weight:650;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.mx-tab input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mx-tab svg{width:18px;height:18px}
.mx-tab:hover{background:rgba(255,255,255,.6)}
.mx-tab:has(input:checked){background:#fff;color:var(--mx-ink);box-shadow:0 6px 16px -8px rgba(127,29,58,.45)}
.mx-tab:has(input:focus-visible){outline:3px solid var(--mx-accent);outline-offset:2px}
.mx-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,56px);margin-top:28px}
.mx-panel p{margin-top:10px;color:var(--mx-muted);max-width:46ch}
.mx-shot{padding:20px;border-radius:20px;background:#1f1724;color:#fce7f3;font-size:.9rem}
.mx-shot li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-radius:12px;background:#2d2233}
.mx-shot li+li{margin-top:8px}
.mx-shot b{font-weight:700;color:#fff}
.mx-shot span{color:#e5cfd9}
.mx-shot em{margin-left:auto;padding:2px 9px;border-radius:99px;background:#fda4af;color:#4c0519;font-style:normal;font-size:.76rem;font-weight:700}
.mx-shot i{flex-basis:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,#fb7185 var(--mx-l),#45334d 0)}
.mx-shot .mx-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mx-big li{display:grid;margin:0!important;text-align:center}
.mx-big b{font-size:1.5rem;letter-spacing:-.02em}
@supports selector(:has(*)){
  .mx-panel{display:none}
  .mx-tabs:has(#mx-t-orders:checked) #mx-p-orders,.mx-tabs:has(#mx-t-stock:checked) #mx-p-stock,
  .mx-tabs:has(#mx-t-rota:checked) #mx-p-rota,.mx-tabs:has(#mx-t-costs:checked) #mx-p-costs{display:grid;animation:mx-in .3s ease-out}
}
@keyframes mx-in{from{opacity:0;transform:translateY(6px)}}
/* 4. scroll-driven reveal */
.mx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px!important}
.mx-grid li{padding:24px;border:1px solid var(--mx-line);border-radius:18px;background:#fff}
.mx-grid h3{margin-top:16px}
.mx-grid p{margin-top:6px;color:var(--mx-muted);font-size:.95rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mx-grid li{animation:mx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
@keyframes mx-rise{from{transform:translateY(56px) scale(.92);box-shadow:none}to{transform:none;box-shadow:0 18px 40px -28px rgba(127,29,58,.35)}}
@media (max-width:991px){
  .mx-sub,.mx-grid{grid-template-columns:repeat(2,1fr)}
  .mx-panel{grid-template-columns:1fr}
}
@media (max-width:575px){
  .mx-sub,.mx-grid{grid-template-columns:1fr}
  .mx-tablist{grid-template-columns:1fr 1fr;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mx *{transition:none!important;animation:none!important}
}

<div><span class="lbl">Subgrid: titles, text and links line up across cards</span>
<section class="mx" aria-labelledby="b-mx-sub">
  <p class="mx-eyebrow">Mise kitchen software</p>
  <h2 class="mx-title" id="b-mx-sub">Run the kitchen, not the spreadsheets</h2>
  <ul class="mx-sub mt-5">
    <li class="card"><span class="mx-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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3>Recipe costing</h3><p>Every dish priced from your latest supplier invoices.</p><a class="mx-more" href="#">See recipe costing <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></li>
    <li class="card"><span class="mx-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 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Supplier price alerts when a case of olive oil goes up</h3><p>A note on your phone the morning a supplier raises a price, with the dishes it affects and by how much.</p><a class="mx-more" href="#">Set up price alerts <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></li>
    <li class="card"><span class="mx-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>Allergen matrix</h3><p>The 14 major allergens tracked per ingredient and rolled up to every dish, ready to print for front of house.</p><a class="mx-more" href="#">View a sample matrix <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></li>
  </ul>
</section></div>

<div><span class="lbl">Container query card, shown in a wide and a narrow slot</span>
<section class="mx" aria-labelledby="b-mx-cq">
  <p class="mx-eyebrow">One component, two widths</p>
  <h2 class="mx-title" id="b-mx-cq">Plate costs at a glance</h2>
  <div class="slots">
    <div class="mx-slot">
      <article class="card mx-card" aria-labelledby="b-mx-card-wide">
        <div class="mx-viz" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="mx-donut"><b>28%<small>food cost</small></b></span><ul class="mx-legend"><li style="--mx-sw:#be123c">Ingredients<b>28%</b></li><li style="--mx-sw:#fb7185">Prep time<b>18%</b></li><li style="--mx-sw:#fecdd3">Margin<b>54%</b></li></ul><p class="mx-dish">Lamb shoulder · £24</p></div>
        <div>
          <h3 id="b-mx-card-wide">Know the cost of every plate</h3>
          <p>Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mx-points"><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
    <div class="mx-slot">
      <article class="card mx-card" aria-labelledby="b-mx-card-narrow">
        <div class="mx-viz" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="mx-donut"><b>28%<small>food cost</small></b></span><ul class="mx-legend"><li style="--mx-sw:#be123c">Ingredients<b>28%</b></li><li style="--mx-sw:#fb7185">Prep time<b>18%</b></li><li style="--mx-sw:#fecdd3">Margin<b>54%</b></li></ul><p class="mx-dish">Lamb shoulder · £24</p></div>
        <div>
          <h3 id="b-mx-card-narrow">Know the cost of every plate</h3>
          <p>Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mx-points"><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li><svg width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
  </div>
</section></div>

<div><span class="lbl">:has() feature tabs: a radio group, no JavaScript</span>
<section class="mx mx-tabs" aria-labelledby="b-mx-tabs">
  <p class="mx-eyebrow">Interactive without JavaScript</p>
  <h2 class="mx-title" id="b-mx-tabs">Everything the pass needs, on one screen</h2>
  <div class="mx-tablist" role="radiogroup" aria-label="Choose a feature">
    <input type="radio" class="btn-check" name="b-mx-feature" id="b-mx-t-orders" autocomplete="off" aria-controls="b-mx-p-orders" checked><label class="btn mx-tab" for="b-mx-t-orders"><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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>Orders</label>
    <input type="radio" class="btn-check" name="b-mx-feature" id="b-mx-t-stock" autocomplete="off" aria-controls="b-mx-p-stock"><label class="btn mx-tab" for="b-mx-t-stock"><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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Stock</label>
    <input type="radio" class="btn-check" name="b-mx-feature" id="b-mx-t-rota" autocomplete="off" aria-controls="b-mx-p-rota"><label class="btn mx-tab" for="b-mx-t-rota"><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="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Rota</label>
    <input type="radio" class="btn-check" name="b-mx-feature" id="b-mx-t-costs" autocomplete="off" aria-controls="b-mx-p-costs"><label class="btn mx-tab" for="b-mx-t-costs"><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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg>Costs</label>
  </div>
  <div class="mx-panel" id="b-mx-p-orders">
    <div><h3>Tickets in the order they were fired</h3><p>New orders appear on the pass tablet the moment a server sends them, with table, covers and how long each has waited.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Table 12</b><span>4 covers · 6 min</span></li><li><b>Table 4</b><span>2 covers · 11 min</span><em>Late</em></li><li><b>Takeaway 88</b><span>3 items · 2 min</span></li></ul>
  </div>
  <div class="mx-panel" id="b-mx-p-stock">
    <div><h3>Par levels that reorder themselves</h3><p>Set a par for each item. When a count drops below it, the item goes onto the next supplier order for you to approve.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Olive oil</b><span>4 of 20 L</span><em>Reorder</em><i style="--mx-l:20%"></i></li><li><b>Plain flour</b><span>18 of 25 kg</span><i style="--mx-l:72%"></i></li><li><b>Double cream</b><span>6 of 12 L</span><i style="--mx-l:50%"></i></li></ul>
  </div>
  <div class="mx-panel" id="b-mx-p-rota">
    <div><h3>A rota that respects contracts</h3><p>Build next week from last week, and Mise warns you before anyone goes over their contracted hours or misses a break.</p></div>
    <ul class="mx-shot" aria-hidden="true"><li><b>Mon</b><span>Ana, Tom, Raj</span></li><li><b>Tue</b><span>Ana, Lee, Raj</span></li><li><b>Wed</b><span>Tom, Lee, Sam</span></li><li><b>Thu</b><span>Ana, Tom, Sam</span></li></ul>
  </div>
  <div class="mx-panel" id="b-mx-p-costs">
    <div><h3>Gross profit, every morning</h3><p>Yesterday's sales and deliveries are matched overnight, so the food cost is waiting when you open the laptop.</p></div>
    <ul class="mx-shot mx-big" aria-hidden="true"><li><b>28.4%</b><span>Food cost</span></li><li><b>30.0%</b><span>Target</span></li><li><b>212</b><span>Covers</span></li></ul>
  </div>
</section></div>

<div><span class="lbl">Scroll-driven reveal, static where unsupported</span>
<section class="mx" aria-labelledby="b-mx-reveal">
  <p class="mx-eyebrow">Scroll down</p>
  <h2 class="mx-title" id="b-mx-reveal">Built for the way kitchens work</h2>
  <ul class="mx-grid list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 mt-4 pt-2 mb-0">
    <li class="col"><div class="card h-100"><span class="mx-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="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><h3>Prep lists by 7am</h3><p>Generated from tonight's covers and what is already in the walk-in.</p></div></li>
    <li class="col"><div class="card h-100"><span class="mx-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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3>Rotas that fit contracts</h3><p>Hours, breaks and rest days checked as you build the week.</p></div></li>
    <li class="col"><div class="card h-100"><span class="mx-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 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span><h3>One-tap supplier orders</h3><p>Approve the suggested order and it goes to each supplier in their format.</p></div></li>
    <li class="col"><div class="card h-100"><span class="mx-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="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><h3>Made for the pass tablet</h3><p>Big targets, high contrast and no tiny menus for greasy fingers.</p></div></li>
    <li class="col"><div class="card h-100"><span class="mx-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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><h3>Temperature logs</h3><p>Fridge and probe readings stored with a timestamp for every inspection.</p></div></li>
    <li class="col"><div class="card h-100"><span class="mx-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="m23 6-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg></span><h3>A weekly GP report</h3><p>Gross profit by dish and by day, emailed to the owner every Monday.</p></div></li>
  </ul>
</section></div>

/* Modern CSS feature sections, no JavaScript:
   - subgrid: each card spans four rows of the parent grid (icon, title, text, link), so titles and links line up
     across cards whatever the copy length; without subgrid the cards fall back to flex columns;
   - container queries: the feature card lays itself out by the width of its slot, not the window;
   - :has(): a radio group switches the feature panels, styled with label:has(:checked); without :has() every
     panel is shown, one under another;
   - scroll-driven animation: cards rise into place as they enter the viewport (animation-timeline: view()),
     only inside @supports and when the visitor has not asked for reduced motion. */
.mx{--mx-ink:#1f1724;--mx-muted:#5b4d63;--mx-accent:#be123c;--mx-accent-hover:#9f1239;--mx-tint:#ffe4e6;--mx-soft:#fff1f2;--mx-line:#eadfe3;--mx-bg:#fffafb;--mx-radius:28px;
  background:var(--mx-bg);color:var(--mx-ink);border-radius:var(--mx-radius);padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.mx :where(h2,h3,p){margin:0}
.mx :where(.mx-sub,.mx-grid,.mx-legend,.mx-points,.mx-shot){margin:0;padding:0;list-style:none}
.mx :focus-visible{box-shadow:none}
.mx a{color:var(--mx-accent);font-weight:650;text-decoration:none}
.mx a:hover{color:var(--mx-accent-hover)}
.mx a:focus-visible{outline:3px solid var(--mx-accent);outline-offset:3px;border-radius:6px}
.mx-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-accent)}
.mx-title{margin-top:12px!important;font-size:clamp(1.8rem,1.2rem + 2.2vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
.mx h3{font-size:1.1rem;line-height:1.3;font-weight:750;text-wrap:balance}
.mx-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mx-tint);color:var(--mx-accent)}
.mx-ico svg{width:23px;height:23px}
.mx-more{display:inline-flex;align-items:center;gap:6px;font-size:.94rem}
.mx-more svg{width:16px;height:16px}
/* 1. subgrid */
.mx-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:991px){.mx-sub{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.mx-sub{grid-template-columns:1fr}}
.mx-sub .card{--bs-card-border-color:var(--mx-line);--bs-card-border-radius:20px;flex-direction:column;align-items:flex-start;gap:14px;padding:28px}
.mx-sub p{color:var(--mx-muted)}
@supports (grid-template-rows:subgrid){
  .mx-sub .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:start;justify-items:start}
  .mx-sub .mx-more{align-self:end}
}
/* 2. container query card */
.mx-slot{container:mx-slot / inline-size}
.mx-card{--bs-card-border-color:var(--mx-line);--bs-card-border-radius:22px;display:grid;gap:22px;padding:22px}
.mx-viz{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:18px;border-radius:16px;background:var(--mx-soft)}
.mx-donut{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 52%,transparent 53%),conic-gradient(#be123c 0 28%,#fb7185 0 46%,#fecdd3 0)}
.mx-donut b{font-size:1.15rem;line-height:1;text-align:center}
.mx-donut small{display:block;font-size:.66rem;font-weight:600;color:var(--mx-muted)}
.mx-legend{display:grid;gap:6px;font-size:.86rem}
.mx-legend li{display:flex;align-items:center;gap:8px}
.mx-legend li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--mx-sw);box-shadow:inset 0 0 0 1px rgba(31,23,36,.15)}
.mx-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.mx-dish{grid-column:1 / -1;font-size:.8rem;font-weight:700;color:var(--mx-muted)}
.mx-card h3+p{margin-top:8px;color:var(--mx-muted)}
.mx-points{display:grid;gap:8px;margin-top:16px!important;font-size:.94rem}
.mx-points li{display:flex;gap:8px;align-items:flex-start}
.mx-points svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--mx-accent)}
@container mx-slot (min-width:560px){
  .mx-card{grid-template-columns:260px 1fr;align-items:center;gap:32px;padding:28px}
  .mx-viz{grid-template-columns:1fr;justify-items:center;text-align:center}
  .mx-legend{width:100%;text-align:left}
}
@container mx-slot (min-width:760px){
  .mx-points{grid-template-columns:1fr 1fr;column-gap:20px}
}
/* 3. :has() feature tabs */
.mx-tablist{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:6px;margin-top:32px;padding:6px;border-radius:16px;background:var(--mx-tint);width:fit-content;max-width:100%}
.mx-tab{--bs-btn-color:#7f1d3a;--bs-btn-hover-color:#7f1d3a;--bs-btn-hover-bg:rgba(255,255,255,.6);--bs-btn-font-weight:650;--bs-btn-border-width:0;--bs-btn-border-radius:12px;--bs-btn-padding-x:18px;
  --bs-btn-active-bg:#fff;--bs-btn-active-color:var(--mx-ink);display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;transition:background-color .2s,color .2s,box-shadow .2s}
.mx-tab svg{width:18px;height:18px}
.btn-check:checked+.mx-tab{background:#fff;color:var(--mx-ink);box-shadow:0 6px 16px -8px rgba(127,29,58,.45)}
.btn-check:focus-visible+.mx-tab{outline:3px solid var(--mx-accent);outline-offset:2px}
.mx-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,56px);margin-top:28px}
.mx-panel p{margin-top:10px;color:var(--mx-muted);max-width:46ch}
.mx-shot{padding:20px;border-radius:20px;background:#1f1724;color:#fce7f3;font-size:.9rem}
.mx-shot li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-radius:12px;background:#2d2233}
.mx-shot li+li{margin-top:8px}
.mx-shot b{font-weight:700;color:#fff}
.mx-shot span{color:#e5cfd9}
.mx-shot em{margin-left:auto;padding:2px 9px;border-radius:99px;background:#fda4af;color:#4c0519;font-style:normal;font-size:.76rem;font-weight:700}
.mx-shot i{flex-basis:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,#fb7185 var(--mx-l),#45334d 0)}
.mx-shot .mx-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mx-big li{display:grid;margin:0!important;text-align:center}
.mx-big b{font-size:1.5rem;letter-spacing:-.02em}
@supports selector(:has(*)){
  .mx-panel{display:none}
  .mx-tabs:has(#b-mx-t-orders:checked) #b-mx-p-orders,.mx-tabs:has(#b-mx-t-stock:checked) #b-mx-p-stock,
  .mx-tabs:has(#b-mx-t-rota:checked) #b-mx-p-rota,.mx-tabs:has(#b-mx-t-costs:checked) #b-mx-p-costs{display:grid;animation:mx-in .3s ease-out}
}
@keyframes mx-in{from{opacity:0;transform:translateY(6px)}}
/* 4. scroll-driven reveal */
.mx-grid .card{--bs-card-border-color:var(--mx-line);--bs-card-border-radius:18px;padding:24px}
.mx-grid h3{margin-top:16px}
.mx-grid p{margin-top:6px;color:var(--mx-muted);font-size:.95rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mx-grid .card{animation:mx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
@keyframes mx-rise{from{transform:translateY(56px) scale(.92);box-shadow:none}to{transform:none;box-shadow:0 18px 40px -28px rgba(127,29,58,.35)}}
@media (max-width:991px){
  .mx-panel{grid-template-columns:1fr}
}
@media (max-width:575px){
  .mx-tablist{grid-template-columns:1fr 1fr;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mx *{transition:none!important;animation:none!important}
}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b4d63] uppercase">Subgrid: titles, text and links line up across cards</span>
<section class="rounded-[28px] bg-[#fffafb] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#1f1724]" aria-labelledby="t-mx-sub">
  <p class="text-[.8rem] font-bold tracking-[.12em] text-[#be123c] uppercase">Mise kitchen software</p>
  <h2 class="mt-3 text-[clamp(1.8rem,1.2rem+2.2vw,2.7rem)] leading-[1.1] font-extrabold tracking-[-.025em] text-balance" id="t-mx-sub">Run the kitchen, not the spreadsheets</h2>
  <ul class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
    <li class="row-span-4 grid grid-rows-subgrid items-start justify-items-start gap-3.5 rounded-[20px] border border-[#eadfe3] bg-white p-7"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">Recipe costing</h3><p class="text-[#5b4d63]">Every dish priced from your latest supplier invoices.</p><a class="inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-[650] text-[#be123c] hover:text-[#9f1239] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#be123c] self-end" href="#">See recipe costing <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></li>
    <li class="row-span-4 grid grid-rows-subgrid items-start justify-items-start gap-3.5 rounded-[20px] border border-[#eadfe3] bg-white p-7"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">Supplier price alerts when a case of olive oil goes up</h3><p class="text-[#5b4d63]">A note on your phone the morning a supplier raises a price, with the dishes it affects and by how much.</p><a class="inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-[650] text-[#be123c] hover:text-[#9f1239] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#be123c] self-end" href="#">Set up price alerts <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></li>
    <li class="row-span-4 grid grid-rows-subgrid items-start justify-items-start gap-3.5 rounded-[20px] border border-[#eadfe3] bg-white p-7"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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.1rem] leading-[1.3] font-[750] text-balance">Allergen matrix</h3><p class="text-[#5b4d63]">The 14 major allergens tracked per ingredient and rolled up to every dish, ready to print for front of house.</p><a class="inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-[650] text-[#be123c] hover:text-[#9f1239] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#be123c] self-end" href="#">View a sample matrix <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></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b4d63] uppercase">Container query card, shown in a wide and a narrow slot</span>
<section class="rounded-[28px] bg-[#fffafb] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#1f1724]" aria-labelledby="t-mx-cq">
  <p class="text-[.8rem] font-bold tracking-[.12em] text-[#be123c] uppercase">One component, two widths</p>
  <h2 class="mt-3 text-[clamp(1.8rem,1.2rem+2.2vw,2.7rem)] leading-[1.1] font-extrabold tracking-[-.025em] text-balance" id="t-mx-cq">Plate costs at a glance</h2>
  <div class="mt-8 grid grid-cols-1 items-start gap-6 min-[901px]:grid-cols-[1fr_320px]">
    <div class="@container/slot">
      <article class="grid gap-[22px] rounded-[22px] border border-[#eadfe3] bg-white p-[22px] @min-[560px]/slot:grid-cols-[260px_1fr] @min-[560px]/slot:items-center @min-[560px]/slot:gap-8 @min-[560px]/slot:p-7" aria-labelledby="t-mx-card-wide">
        <div class="grid grid-cols-[auto_1fr] items-center gap-[18px] rounded-2xl bg-[#fff1f2] p-[18px] @min-[560px]/slot:grid-cols-1 @min-[560px]/slot:justify-items-center @min-[560px]/slot:text-center" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="grid size-[104px] place-items-center rounded-full [background:radial-gradient(circle,#fff_0_52%,transparent_53%),conic-gradient(#be123c_0_28%,#fb7185_0_46%,#fecdd3_0)]"><b class="text-center text-[1.15rem] leading-none">28%<small class="block text-[.66rem] font-semibold text-[#5b4d63]">food cost</small></b></span><ul class="grid gap-1.5 text-[.86rem] @min-[560px]/slot:w-full @min-[560px]/slot:text-left"><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#be123c] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Ingredients<b class="ml-auto tabular-nums">28%</b></li><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#fb7185] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Prep time<b class="ml-auto tabular-nums">18%</b></li><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#fecdd3] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Margin<b class="ml-auto tabular-nums">54%</b></li></ul><p class="col-span-full text-[.8rem] font-bold text-[#5b4d63]">Lamb shoulder · £24</p></div>
        <div>
          <h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance" id="t-mx-card-wide">Know the cost of every plate</h3>
          <p class="mt-2 text-[#5b4d63]">Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mt-4 grid gap-2 text-[.94rem] @min-[760px]/slot:grid-cols-2 @min-[760px]/slot:gap-x-5"><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
    <div class="@container/slot">
      <article class="grid gap-[22px] rounded-[22px] border border-[#eadfe3] bg-white p-[22px] @min-[560px]/slot:grid-cols-[260px_1fr] @min-[560px]/slot:items-center @min-[560px]/slot:gap-8 @min-[560px]/slot:p-7" aria-labelledby="t-mx-card-narrow">
        <div class="grid grid-cols-[auto_1fr] items-center gap-[18px] rounded-2xl bg-[#fff1f2] p-[18px] @min-[560px]/slot:grid-cols-1 @min-[560px]/slot:justify-items-center @min-[560px]/slot:text-center" role="img" aria-label="Plate cost of the lamb shoulder: ingredients 28 percent, prep time 18 percent, margin 54 percent."><span class="grid size-[104px] place-items-center rounded-full [background:radial-gradient(circle,#fff_0_52%,transparent_53%),conic-gradient(#be123c_0_28%,#fb7185_0_46%,#fecdd3_0)]"><b class="text-center text-[1.15rem] leading-none">28%<small class="block text-[.66rem] font-semibold text-[#5b4d63]">food cost</small></b></span><ul class="grid gap-1.5 text-[.86rem] @min-[560px]/slot:w-full @min-[560px]/slot:text-left"><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#be123c] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Ingredients<b class="ml-auto tabular-nums">28%</b></li><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#fb7185] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Prep time<b class="ml-auto tabular-nums">18%</b></li><li class="flex items-center gap-2 before:size-2.5 before:rounded-[3px] before:bg-[#fecdd3] before:shadow-[inset_0_0_0_1px_rgba(31,23,36,.15)] before:content-['']">Margin<b class="ml-auto tabular-nums">54%</b></li></ul><p class="col-span-full text-[.8rem] font-bold text-[#5b4d63]">Lamb shoulder · £24</p></div>
        <div>
          <h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance" id="t-mx-card-narrow">Know the cost of every plate</h3>
          <p class="mt-2 text-[#5b4d63]">Mise prices each recipe from your latest invoices, so menu margins stay right when ingredient prices move.</p>
          <ul class="mt-4 grid gap-2 text-[.94rem] @min-[760px]/slot:grid-cols-2 @min-[760px]/slot:gap-x-5"><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Costs update when an invoice is scanned</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Portions in grams or units</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>A margin target per menu section</li><li class="flex items-start gap-2"><svg class="mt-[3px] size-[18px] flex-none text-[#be123c]" width="18" height="18" 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="M20 6 9 17l-5-5"/></svg>Exports prices to your till</li></ul>
        </div>
      </article>
    </div>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b4d63] uppercase">:has() feature tabs: a radio group, no JavaScript</span>
<section class="group/tabs rounded-[28px] bg-[#fffafb] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#1f1724]" aria-labelledby="t-mx-tabs">
  <p class="text-[.8rem] font-bold tracking-[.12em] text-[#be123c] uppercase">Interactive without JavaScript</p>
  <h2 class="mt-3 text-[clamp(1.8rem,1.2rem+2.2vw,2.7rem)] leading-[1.1] font-extrabold tracking-[-.025em] text-balance" id="t-mx-tabs">Everything the pass needs, on one screen</h2>
  <div class="mt-8 grid w-full max-w-full grid-cols-2 gap-1.5 rounded-2xl bg-[#ffe4e6] p-1.5 sm:w-fit sm:grid-cols-[repeat(4,auto)]" role="radiogroup" aria-label="Choose a feature">
    <label class="relative flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-xl px-[18px] font-[650] text-[#7f1d3a] transition duration-200 hover:bg-white/60 has-checked:bg-white has-checked:text-[#1f1724] has-checked:shadow-[0_6px_16px_-8px_rgba(127,29,58,.45)] has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-[#be123c] motion-reduce:transition-none"><input class="pointer-events-none absolute m-0 size-px opacity-0" type="radio" name="t-mx-feature" id="t-mx-t-orders" aria-controls="t-mx-p-orders" checked><svg class="size-[18px]" width="18" height="18" 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>Orders</label>
    <label class="relative flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-xl px-[18px] font-[650] text-[#7f1d3a] transition duration-200 hover:bg-white/60 has-checked:bg-white has-checked:text-[#1f1724] has-checked:shadow-[0_6px_16px_-8px_rgba(127,29,58,.45)] has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-[#be123c] motion-reduce:transition-none"><input class="pointer-events-none absolute m-0 size-px opacity-0" type="radio" name="t-mx-feature" id="t-mx-t-stock" aria-controls="t-mx-p-stock"><svg class="size-[18px]" width="18" height="18" 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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>Stock</label>
    <label class="relative flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-xl px-[18px] font-[650] text-[#7f1d3a] transition duration-200 hover:bg-white/60 has-checked:bg-white has-checked:text-[#1f1724] has-checked:shadow-[0_6px_16px_-8px_rgba(127,29,58,.45)] has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-[#be123c] motion-reduce:transition-none"><input class="pointer-events-none absolute m-0 size-px opacity-0" type="radio" name="t-mx-feature" id="t-mx-t-rota" aria-controls="t-mx-p-rota"><svg class="size-[18px]" width="18" height="18" 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="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Rota</label>
    <label class="relative flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-xl px-[18px] font-[650] text-[#7f1d3a] transition duration-200 hover:bg-white/60 has-checked:bg-white has-checked:text-[#1f1724] has-checked:shadow-[0_6px_16px_-8px_rgba(127,29,58,.45)] has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-[#be123c] motion-reduce:transition-none"><input class="pointer-events-none absolute m-0 size-px opacity-0" type="radio" name="t-mx-feature" id="t-mx-t-costs" aria-controls="t-mx-p-costs"><svg class="size-[18px]" width="18" height="18" 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="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg>Costs</label>
  </div>
  <div class="mx-panel mt-7 hidden grid-cols-1 items-center gap-[clamp(24px,5vw,56px)] group-has-[#t-mx-t-orders:checked]/tabs:grid motion-safe:group-has-[#t-mx-t-orders:checked]/tabs:animate-panel-in lg:grid-cols-2" id="t-mx-p-orders">
    <div><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">Tickets in the order they were fired</h3><p class="mt-2.5 max-w-[46ch] text-[#5b4d63]">New orders appear on the pass tablet the moment a server sends them, with table, covers and how long each has waited.</p></div>
    <ul class="rounded-[20px] bg-[#1f1724] p-5 text-[.9rem] text-[#fce7f3]" aria-hidden="true"><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Table 12</b><span class="text-[#e5cfd9]">4 covers · 6 min</span></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Table 4</b><span class="text-[#e5cfd9]">2 covers · 11 min</span><em class="ml-auto rounded-full bg-[#fda4af] px-[9px] py-0.5 text-[.76rem] font-bold text-[#4c0519] not-italic">Late</em></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Takeaway 88</b><span class="text-[#e5cfd9]">3 items · 2 min</span></li></ul>
  </div>
  <div class="mx-panel mt-7 hidden grid-cols-1 items-center gap-[clamp(24px,5vw,56px)] group-has-[#t-mx-t-stock:checked]/tabs:grid motion-safe:group-has-[#t-mx-t-stock:checked]/tabs:animate-panel-in lg:grid-cols-2" id="t-mx-p-stock">
    <div><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">Par levels that reorder themselves</h3><p class="mt-2.5 max-w-[46ch] text-[#5b4d63]">Set a par for each item. When a count drops below it, the item goes onto the next supplier order for you to approve.</p></div>
    <ul class="rounded-[20px] bg-[#1f1724] p-5 text-[.9rem] text-[#fce7f3]" aria-hidden="true"><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Olive oil</b><span class="text-[#e5cfd9]">4 of 20 L</span><em class="ml-auto rounded-full bg-[#fda4af] px-[9px] py-0.5 text-[.76rem] font-bold text-[#4c0519] not-italic">Reorder</em><i class="h-1.5 basis-full rounded-md bg-[#45334d]"><i class="block h-full rounded-md bg-[#fb7185]" style="width:20%"></i></i></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Plain flour</b><span class="text-[#e5cfd9]">18 of 25 kg</span><i class="h-1.5 basis-full rounded-md bg-[#45334d]"><i class="block h-full rounded-md bg-[#fb7185]" style="width:72%"></i></i></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Double cream</b><span class="text-[#e5cfd9]">6 of 12 L</span><i class="h-1.5 basis-full rounded-md bg-[#45334d]"><i class="block h-full rounded-md bg-[#fb7185]" style="width:50%"></i></i></li></ul>
  </div>
  <div class="mx-panel mt-7 hidden grid-cols-1 items-center gap-[clamp(24px,5vw,56px)] group-has-[#t-mx-t-rota:checked]/tabs:grid motion-safe:group-has-[#t-mx-t-rota:checked]/tabs:animate-panel-in lg:grid-cols-2" id="t-mx-p-rota">
    <div><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">A rota that respects contracts</h3><p class="mt-2.5 max-w-[46ch] text-[#5b4d63]">Build next week from last week, and Mise warns you before anyone goes over their contracted hours or misses a break.</p></div>
    <ul class="rounded-[20px] bg-[#1f1724] p-5 text-[.9rem] text-[#fce7f3]" aria-hidden="true"><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Mon</b><span class="text-[#e5cfd9]">Ana, Tom, Raj</span></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Tue</b><span class="text-[#e5cfd9]">Ana, Lee, Raj</span></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Wed</b><span class="text-[#e5cfd9]">Tom, Lee, Sam</span></li><li class="flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-xl bg-[#2d2233] px-3.5 py-3 [&+li]:mt-2"><b class="font-bold text-white">Thu</b><span class="text-[#e5cfd9]">Ana, Tom, Sam</span></li></ul>
  </div>
  <div class="mx-panel mt-7 hidden grid-cols-1 items-center gap-[clamp(24px,5vw,56px)] group-has-[#t-mx-t-costs:checked]/tabs:grid motion-safe:group-has-[#t-mx-t-costs:checked]/tabs:animate-panel-in lg:grid-cols-2" id="t-mx-p-costs">
    <div><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance">Gross profit, every morning</h3><p class="mt-2.5 max-w-[46ch] text-[#5b4d63]">Yesterday's sales and deliveries are matched overnight, so the food cost is waiting when you open the laptop.</p></div>
    <ul class="grid grid-cols-3 gap-2 rounded-[20px] bg-[#1f1724] p-5 text-[.9rem] text-[#fce7f3]" aria-hidden="true"><li class="grid rounded-xl bg-[#2d2233] px-3.5 py-3 text-center"><b class="text-[1.5rem] font-bold tracking-[-.02em] text-white">28.4%</b><span class="text-[#e5cfd9]">Food cost</span></li><li class="grid rounded-xl bg-[#2d2233] px-3.5 py-3 text-center"><b class="text-[1.5rem] font-bold tracking-[-.02em] text-white">30.0%</b><span class="text-[#e5cfd9]">Target</span></li><li class="grid rounded-xl bg-[#2d2233] px-3.5 py-3 text-center"><b class="text-[1.5rem] font-bold tracking-[-.02em] text-white">212</b><span class="text-[#e5cfd9]">Covers</span></li></ul>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b4d63] uppercase">Scroll-driven reveal, static where unsupported</span>
<section class="rounded-[28px] bg-[#fffafb] px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#1f1724]" aria-labelledby="t-mx-reveal">
  <p class="text-[.8rem] font-bold tracking-[.12em] text-[#be123c] uppercase">Scroll down</p>
  <h2 class="mt-3 text-[clamp(1.8rem,1.2rem+2.2vw,2.7rem)] leading-[1.1] font-extrabold tracking-[-.025em] text-balance" id="t-mx-reveal">Built for the way kitchens work</h2>
  <ul class="mt-10 grid grid-cols-1 gap-[18px] sm:grid-cols-2 lg:grid-cols-3">
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">Prep lists by 7am</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Generated from tonight's covers and what is already in the walk-in.</p></li>
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">Rotas that fit contracts</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Hours, breaks and rest days checked as you build the week.</p></li>
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">One-tap supplier orders</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Approve the suggested order and it goes to each supplier in their format.</p></li>
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">Made for the pass tablet</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Big targets, high contrast and no tiny menus for greasy fingers.</p></li>
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">Temperature logs</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Fridge and probe readings stored with a timestamp for every inspection.</p></li>
    <li class="mx-rise rounded-[18px] border border-[#eadfe3] bg-white p-6"><span class="grid size-[46px] place-items-center rounded-[14px] bg-[#ffe4e6] text-[#be123c]"><svg class="size-[23px]" 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="m23 6-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg></span><h3 class="text-[1.1rem] leading-[1.3] font-[750] text-balance mt-4">A weekly GP report</h3><p class="mt-1.5 text-[.95rem] text-[#5b4d63]">Gross profit by dish and by day, emailed to the owner every Monday.</p></li>
  </ul>
</section></div>

/* Only what utilities can't express: the scroll-driven reveal (inside @supports, and only without reduced motion),
   the panel fade, and the fallback that shows every panel in browsers without :has(). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mx-rise{animation:mx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
@keyframes mx-rise{from{transform:translateY(56px) scale(.92);box-shadow:none}to{transform:none;box-shadow:0 18px 40px -28px rgba(127,29,58,.35)}}
@theme{
  --animate-panel-in: mx-in .3s ease-out;
  @keyframes mx-in{from{opacity:0;transform:translateY(6px)}}
}
@supports not selector(:has(*)){.mx-panel{display:grid!important}}