/* ============================================================
   platewise.ai site chrome.

   Everything that makes a page look like Platewise lives in
   /assets/mise.css. This file holds only the handful of rules
   that are specific to this marketing site and deliberately not
   part of the design system, written against mise tokens.
   If a rule here starts being useful on a second surface, it
   belongs in mise.css instead.
   ============================================================ */

/* NOT IN THE KIT: .phone, the device bezel drawn around .app so the
   cook screen can be shown as a photograph of the product. It is a
   frame, not a component, which is why it stays out of mise.css. Same
   rules as the kit page and the site mockup use. */
.phone {
  width: 100%;
  max-width: 380px;
  border-radius: 30px;
  border: 6px solid var(--iron);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.phone .app { min-height: 0; }
.phone .app-body { padding-bottom: 16px; }