/* The demo's stylesheet, and the fourth place this palette is written down.
 *
 * The other three are web/app/assets/stylesheets/tokens.css,
 * marketing/landing/public/styles.css and the mailer layout. `bin/check-tokens`
 * holds THIS file to the strictest rule of the four: every token it names that
 * the app also names must carry the same hex, no rule below the :root block may
 * write a hex at all, and no colour in demo.html may be off the palette. The
 * demo this replaced hardcoded its copies where nothing could see them, and
 * that is precisely how the terracotta-to-raspberry change shipped half done.
 *
 * Everything below the token block mirrors the app rather than the marketing
 * site, because the app's stylesheets are the specification and this page is a
 * picture of them: see .rivet/context/paradigms/design-system.md. The three
 * faces are the app's — Bricolage Grotesque for headings, Figtree for UI, DM
 * Serif Display rationed to the shop's own voice — and the shapes come from
 * design/05-makers-mark/SYSTEM.md:
 *
 *   1. Nothing sits dead straight. Boxes take the --hand-* radii and cards in a
 *      list alternate --tilt-card with --tilt-card-alt.
 *   2. Anything a finger has to hit accurately keeps --hand-soft and NO
 *      rotation: inputs, chips, the date grid, the step rail, the tab bar.
 *   3. Colour means what SYSTEM.md section 2 says: sage is money landed, amber
 *      is waiting on someone else, raspberry is waiting on you.
 *
 * Only the components the demo actually shows are here. It is not a copy of
 * components.css and should not grow into one.
 */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmserif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmserif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage carries every heading in the app since Maker's Mark, so it carries
   them here. The woff2 pair was already on this site for the landing page's own
   headlines, so the whole cost of matching the product is the @font-face. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #fbf5ec;
  --cream-warm: #fdfaf3;
  --cream-deep: #f4eddc;
  --cream-note: #f7f1e4;
  --surface: #ffffff;

  --ink: #2b1b12;
  --ink-soft: #5f4c36;
  --muted: #7a6250;

  --line: #eadfcc;
  --line-soft: #f4ecdd;
  --line-strong: #e2d4bc;

  --raspberry: #c2255c;
  --raspberry-deep: #9c1b49;
  --raspberry-tint: #fdecf2;
  --raspberry-line: #f2c1d3;

  --sage: #3f7d4e;
  --sage-deep: #2f5c3a;
  --sage-text: #33562e;
  --sage-tint: #eef4ea;
  --sage-line: #cfe0c8;

  --amber-tint: #f7ecd8;
  --amber-line: #ecd9b4;
  --amber-text: #7a5a17;

  --on-accent: #ffffff;
  --ink-pressed: #1d110a;
  --closed-swatch: #e8dfcc;
  --avatar-from: #f0b7cd;

  --photo-from: #f6dfc4;
  --photo-mid: #e0a17c;
  --photo-to: #b46a4e;

  /* The phone bezel. The only colour on this page that is not in the product's
     palette, because it is not part of the product — it is the prop the
     product is being held in. Declared here anyway so no rule below writes a
     hex, which is what lets check-tokens police the whole file. */
  --device: #23150e;

  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    sans-serif;
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --headline: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui,
    sans-serif;

  /* The hand, straight out of the app's tokens.css. Alternate --hand-a and
     --hand-b down a list so no two neighbours share a silhouette; --hand-soft
     is the one a control may wear, and it is the only one a control ever
     wears. */
  --hand-a: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --hand-b: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --hand-c: 225px 22px 255px 18px / 22px 255px 18px 225px;
  --hand-soft: 22px 17px 26px 15px / 17px 25px 15px 23px;

  /* Small tilts for cards, a big one for stamps, none for anything a finger
     has to hit. Small pieces (badges, stamps, bubbles) carry their own written
     radius rather than --hand-soft, because a border-radius is scaled down
     when its radii overrun the box: 22px on a 20px-tall badge collapses into a
     lozenge and the wobble disappears. */
  --tilt-card: 0.6deg;
  --tilt-card-alt: -0.5deg;
  --tilt-stamp: -3deg;
  --stamp-radius: 6px 12px 5px 14px / 12px 6px 13px 7px;

  --shadow-card: 0 1px 2px rgba(43, 27, 18, 0.04);
  --shadow-float: 0 16px 40px rgba(43, 27, 18, 0.16);
  --glass: rgba(255, 253, 248, 0.72);
  --glass-line: rgba(43, 27, 18, 0.08);
  --glass-blur: saturate(180%) blur(20px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

svg {
  display: block;
}

/* The sprite. One document, no Turbo frames and no mailer, which is the case
   the app's ui/mark partial inlines to avoid; here <use> is safe and twenty
   marks drawn once is the cheaper half of the trade. */
.mk-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* One pen for every drawing on the page, exactly as components.css says it:
   fill none, stroke currentColor, round caps, so a mark takes its colour from
   whatever state it sits in. `fill: none` is load-bearing rather than tidy —
   an SVG path defaults to a black fill. */
.mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.mark--fine {
  stroke-width: 1.6;
}

/* A seal is a frame and a decorative device. It carries a SHOP's name or a
   status; it never carries ours in place of the brand mark, and the mark is
   /logo.svg untouched. SYSTEM.md section 0. */
.seal {
  color: var(--raspberry-deep);
}
.seal__rim {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.seal__inner {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}
.seal__text {
  font-family: var(--sans);
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 2.6px;
  fill: currentColor;
  stroke: none;
}

/* Small renderings need a heavier nib to keep the same felt weight: a 160-unit
   viewBox squeezed to 44px would leave hairlines, so the strokes scale UP as
   the seal gets smaller. */
.seal-mini {
  width: 44px;
  height: 44px;
  flex: none;
  rotate: -6deg;
}
.seal-mini .seal__rim,
.seal-mini .mark {
  stroke-width: 6;
}
.seal-mini .seal__inner {
  stroke-width: 4;
}

/* ---- The page around the phone ---------------------------------------- */

.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 56px;
}

.stage__bar {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* The brand lockup is the mark plus the word, which is what the landing header
   does. The mark is /logo.svg as drawn and nothing here recolours it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.brand__mark {
  width: 30px;
  height: 30px;
}
.brand__word {
  font-family: var(--headline);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stage__exit {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1.5px dashed var(--line-strong);
  padding-bottom: 2px;
}
.stage__exit:hover {
  color: var(--ink);
}

.stage__intro {
  width: 100%;
  max-width: 1080px;
  margin-bottom: 20px;
}
.stage__title {
  font-family: var(--headline);
  font-size: 27px;
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.stage__lede {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 15px;
}

/* rivet-ish note for whoever edits this next: the three-column arrangement is
   the point of the rewrite. The old page showed one screen behind two arrows
   with a caption above it, so a four-step flow could only be understood by
   stepping through nine screens in order and the words did all the explaining.
   Now the rail states the whole shape at once, the phone shows one scene, and
   the note beside it says only what that scene cannot. */
/* Below the desk tier it is one column, and the ORDER is the reason this is a
   flex box rather than a grid: the note has to come before the phone, because
   you read what a scene is and then look at it. In three columns the note sits
   beside the phone instead, where before and after stop meaning anything. */
.demo {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.rail {
  order: 1;
}
.caption {
  order: 2;
}
.demo__stage {
  order: 3;
}
.stage__cta {
  order: 4;
}

@media (min-width: 1040px) {
  .demo {
    display: grid;
    grid-template-columns: 236px minmax(0, 400px) minmax(250px, 1fr);
    grid-template-rows: auto 1fr;
    gap: 22px 34px;
    align-items: start;
  }
  .rail {
    grid-area: 1 / 1 / 3 / 2;
  }
  .demo__stage {
    grid-area: 1 / 2 / 3 / 3;
  }
  .caption {
    grid-area: 1 / 3 / 2 / 4;
  }
  .stage__cta {
    grid-area: 2 / 3 / 3 / 4;
    align-self: start;
  }
}

/* ---- The rail: four acts, nine steps ----------------------------------- */

.rail {
  width: 100%;
}

.rail__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.rail__acts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* The strip scrolls sideways; the PAGE must not. Same reason .pills carries
     it in the app: without it the leftover gesture chains to the document and
     the whole page rubber-bands. */
  overscroll-behavior-x: contain;
}
.rail__acts::-webkit-scrollbar {
  display: none;
}

/* An act is a signpost, not a target, so it takes a card's sketched edge. The
   STEPS inside it are buttons and take --hand-soft with no rotation. */
.rail__act {
  flex: 1 0 auto;
  min-width: 132px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-a);
  background: var(--cream-warm);
  color: var(--muted);
}
.rail__act:nth-child(even) {
  border-radius: var(--hand-b);
}
.rail__act[data-current] {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

.rail__act-mark {
  width: 22px;
  height: 22px;
}
.rail__act-name {
  margin: 0;
  font-family: var(--headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rail__act-num {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Below the desk tier the nine step names would be a second navigation on top
   of the dots under the phone, so the strip stops at the four acts: that is
   the shape of the flow, which is what somebody scanning wants. The dots and
   the arrows still reach every screen. */
.rail__steps {
  display: none;
}

@media (min-width: 1040px) {
  .rail__acts {
    flex-direction: column;
    gap: 14px;
    overflow: visible;
  }
  .rail__act {
    display: block;
    min-width: 0;
    padding: 12px 14px 10px;
  }
  .rail__act-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rail__steps {
    display: block;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
  }
  .rail__step {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    border: 1.5px solid transparent;
    border-radius: var(--hand-soft);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .rail__step:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }
  .rail__step[data-active] {
    color: var(--ink);
    font-weight: 800;
    border-color: var(--ink);
    background: var(--cream-deep);
  }
  .rail__step-num {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  .rail__step[data-active] .rail__step-num {
    color: var(--raspberry);
  }
}

/* ---- The phone --------------------------------------------------------- */

.demo__stage {
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.phone {
  width: 100%;
  background: var(--cream);
  border: 10px solid var(--device);
  border-radius: 38px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.phone__notch {
  height: 24px;
  background: var(--device);
  border-radius: 0 0 14px 14px;
  width: 42%;
  margin: 0 auto;
  flex: none;
}
.phone__screen {
  padding: 4px 16px 22px;
  min-height: 520px;
  flex: 1;
}

/* Two surfaces, and the phone says which one you are looking at. The baker
   gets the app bar and the tab bar; the customer gets the shop's own band and
   no navigation at all, because she arrives cold from an Instagram tap and has
   nothing to learn. That distinction is most of what the product IS, and the
   old demo drew neither. */
.phone[data-surface='baker'] .chrome--shop,
.phone[data-surface='shop'] .chrome--baker {
  display: none;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 6px;
  flex: none;
}
.app-bar__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--ink);
}
.app-bar__brand img {
  width: 22px;
  height: 22px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-from), var(--raspberry));
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* The shop's band, torn off the sheet below it. A repeated mask tile rather
   than a polygon, for the app's reason: a polygon's tooth count is fixed and
   its tooth width is a percentage, so the same deckle is fine at one width and
   scallops at another. The tile is 12px at every width. Amplitude 5px, inside
   SYSTEM.md section 6's 4 to 9. */
.public__head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  padding: 14px 18px 20px;
  flex: none;
  -webkit-mask-image: radial-gradient(
    circle 5px at 6px 100%,
    transparent 0 5px,
    var(--ink) 5.3px
  );
  -webkit-mask-size: 12px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle 5px at 6px 100%, transparent 0 5px, var(--ink) 5.3px);
  mask-size: 12px 100%;
  mask-repeat: repeat-x;
}
.public__head .title {
  font-family: var(--headline);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.phone[data-surface='shop'] .phone__screen {
  background: var(--surface);
}

/* Material's metrics, because that is literally what the Android shell draws
   and a baker who uses both should see one navigation. 24px icon in a 64x32
   pill, a 12px label under it. --hand-soft on the indicator and no tilt on the
   bar: SYSTEM.md section 3 puts it with the inputs. */
.tab-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px dashed var(--glass-line);
  flex: none;
}
.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  color: var(--muted);
}
.tab-bar__item svg {
  box-sizing: border-box;
  width: 100%;
  max-width: 56px;
  height: 28px;
  padding: 3px 0;
  border-radius: var(--hand-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phone[data-tab='orders'] [data-tab-key='orders'],
.phone[data-tab='calendar'] [data-tab-key='calendar'],
.phone[data-tab='menu'] [data-tab-key='menu'],
.phone[data-tab='dms'] [data-tab-key='dms'] {
  color: var(--raspberry);
}
.phone[data-tab='orders'] [data-tab-key='orders'] svg,
.phone[data-tab='calendar'] [data-tab-key='calendar'] svg,
.phone[data-tab='menu'] [data-tab-key='menu'] svg,
.phone[data-tab='dms'] [data-tab-key='dms'] svg {
  background: var(--raspberry-tint);
}

/* ---- Screens ----------------------------------------------------------- */

.screen {
  display: none;
}
.screen[data-active] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-title {
  font-family: var(--headline);
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}

/* The torn rule under a screen title, as a pseudo-element for the app's
   reason: .screen__head is a flex row, so a ::after in flow would become a
   third flex item and land between the title and the stamp on the right.
   Amplitude 6px; SYSTEM.md section 6 caps it at 9. */
.screen__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
}
.screen__head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: radial-gradient(circle at 50% 132%, var(--line-strong) 0 3.4px, transparent 3.7px)
    repeat-x 0 0 / 11px 6px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row--between {
  justify-content: space-between;
}

.eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.text-sage {
  color: var(--sage);
}

/* Money is a headline: it is the number the baker is scanning a board for. */
.money {
  font-family: var(--headline);
  font-weight: 720;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Cards, stamps, pills, rows ---------------------------------------- */

.card {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-a);
  box-shadow: var(--shadow-card);
}
.card--pad {
  padding: 13px 15px;
}

/* The alternation is the point, not the tilt: --hand-a and --hand-b are mirror
   images, so it is two adjacent cards NOT matching that sells the hand. Break
   it and the direction collapses into "rounded corners with a rotation". */
.order-card {
  border-radius: var(--hand-a);
  rotate: var(--tilt-card);
}
.order-card:nth-child(even) {
  border-radius: var(--hand-b);
  rotate: var(--tilt-card-alt);
}
.order-card__name {
  font-size: 15px;
  font-weight: 800;
}
.order-card__title {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 6px;
}
.order-card__when {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
/* --headline on the figure and --sans on the name, which is the app's split:
   on a board the money is what the eye hunts for and the name is what it reads
   once it has landed. */
.order-card__money {
  font-family: var(--headline);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* rivet-ish: the rubber stamp. Uppercase, tracked, 2px border, sketched radius,
   pressed on at an angle. The radius is written out rather than taken from
   --hand-soft because a border-radius is scaled down when its radii overrun the
   box, and 22px on a 20px-tall badge collapses into a pill.
   The COLOURS are SYSTEM.md section 2: raspberry is waiting on you, so a new
   inquiry — the one state that is nobody's job but the baker's — is raspberry
   and not the soft green it used to be here. */
.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: var(--stamp-radius);
  padding: 3px 9px 2px;
  white-space: nowrap;
  background: var(--cream-deep);
  color: var(--ink-soft);
  rotate: var(--tilt-stamp);
}
.badge--new {
  background: var(--raspberry-tint);
  color: var(--raspberry-deep);
}
.badge--waiting {
  background: var(--amber-tint);
  color: var(--amber-text);
}
/* The one stamp worth the noise. It is spent on the fact the product turns on,
   so it leans the other way from every other stamp and is the only one filled
   solid. Do not stamp six things per screen. */
.badge--paid {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--on-accent);
  rotate: calc(var(--tilt-stamp) * -1);
}
/* The loose stamp: a phrase pinned to a card rather than an order's stage. */
.stampline {
  display: inline-block;
  align-self: flex-end;
  padding: 4px 11px 3px;
  border: 2px solid currentColor;
  border-radius: var(--stamp-radius);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  rotate: var(--tilt-stamp);
  color: var(--amber-text);
  background: var(--cream-warm);
}

/* A docket stamp rather than a state stamp: it says the thing that is true
   whatever happens next, which is the reference number. Neutral ink, because
   sage would claim money landed. */
.reference {
  display: inline-block;
  /* The screen is a flex column, so without this the stamp stretches to the
     full width and stops reading as something pressed onto the page. */
  align-self: flex-start;
  background: var(--cream-note);
  border: 2px solid var(--line-strong);
  border-radius: var(--stamp-radius);
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  rotate: var(--tilt-stamp);
}
.reference b {
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--ink);
}

/* Controls: --hand-soft and no tilt. A chip strip a thumb flicks sideways
   cannot afford either an angle or a corner it cannot predict. */
.pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pills::-webkit-scrollbar {
  display: none;
}
.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: var(--hand-soft);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pill[aria-current='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.pill__count {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* --hand-soft and not one of the wilder three: .rows is overflow: hidden for
   its corners, so a 255px radius takes a bite out of the first and last ROWS
   rather than out of the card. A document keeps a shape you can read a column
   against. */
.rows {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-soft);
  overflow: hidden;
}
.rows__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.rows__row:last-child {
  border-bottom: 0;
}
/* Both sides shrink and the VALUE stops at its longest word, which is what
   keeps a price whole inside an overflow: hidden box. */
.rows__key {
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.rows__value {
  font-weight: 700;
  text-align: right;
  flex-shrink: 999;
  min-width: min-content;
}
.rows__row--total {
  background: var(--cream-warm);
  border-bottom: 0;
}
.rows__row--total .rows__key {
  color: var(--ink);
  font-weight: 800;
}
/* One of the three places --display is spent, and the one the customer came
   for. Weight 400 explicitly: DM Serif ships one weight, so an inherited 700
   would be synthesised and read as a smear rather than as a total. */
.rows__row--total .rows__value {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
}

/* The torn edge, spent on the summary under a document about money — the quote,
   the receipt, the invoice. The padding-bottom is what makes the deckle safe
   rather than decorative: a clip-path cuts everything inside the element, so
   the tear needs empty paper to bite into instead of the total. */
.rows--summary {
  padding-bottom: 12px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    96% 100%,
    93% calc(100% - 9px),
    89% 100%,
    85% calc(100% - 7px),
    81% 100%,
    77% calc(100% - 9px),
    73% 100%,
    69% calc(100% - 8px),
    65% 100%,
    61% calc(100% - 9px),
    57% 100%,
    53% calc(100% - 7px),
    49% 100%,
    45% calc(100% - 9px),
    41% 100%,
    37% calc(100% - 8px),
    33% 100%,
    29% calc(100% - 9px),
    25% 100%,
    21% calc(100% - 6px),
    17% 100%,
    13% calc(100% - 9px),
    9% 100%,
    5% calc(100% - 8px),
    2% 100%,
    0 calc(100% - 9px)
  );
}

/* A note is a slip of paper laid on the card, so it takes the sketched edge and
   NOT a tilt: there are several per screen and tilting them all would spend the
   angle that makes a stamp mean something. The tints are the state vocabulary
   and are used for states only — an explanation is a plain note. */
.note {
  background: var(--cream-note);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-soft);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.note--sage {
  background: var(--sage-tint);
  border-color: var(--sage-line);
  color: var(--sage-text);
}
.note--amber {
  background: var(--amber-tint);
  border-color: var(--amber-line);
  color: var(--amber-text);
}
.note__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  margin-bottom: 4px;
}
.note__head .mark {
  width: 18px;
  height: 18px;
}

/* A button is letterpressed: an inked outline in --hand-a with a hard 3px
   shadow and no blur under it, so it reads as type pressed onto paper. On a
   wide short box the 255px corners resolve to shallow arcs on two corners and
   3px on the other two, and that asymmetry IS the drawn look. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--hand-a);
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  cursor: default;
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn--primary {
  background: var(--raspberry);
  border-color: var(--raspberry-deep);
  color: var(--on-accent);
  box-shadow: 0 3px 0 var(--raspberry-deep);
}
.btn--ink {
  background: var(--ink);
  border-color: var(--ink-pressed);
  color: var(--cream);
  box-shadow: 0 3px 0 var(--ink-pressed);
}
.btn--sage {
  background: var(--sage);
  border-color: var(--sage-deep);
  color: var(--on-accent);
  box-shadow: 0 3px 0 var(--sage-deep);
}
/* ---- Form controls ----------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* --hand-soft and no tilt, same reason as the inputs and the date grid: a chip
   is a target, and a box whose corners are visibly uneven is charming exactly
   once and then it is a control somebody mis-taps. */
.chip {
  display: block;
  padding: 10px 13px;
  border-radius: var(--hand-soft);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}
/* The padding gives back exactly what the thicker border takes, so choosing a
   chip does not move the ones beside it. */
.chip[data-picked] {
  border: 2px solid var(--raspberry);
  background: var(--raspberry-tint);
  color: var(--raspberry-deep);
  padding: 9.5px 12.5px;
}

/* ---- Instagram thread -------------------------------------------------- */

.dm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Bubbles carry their own radius rather than --hand-soft, for the badge's
   reason: at this size the token's 22px corners resolve into a lozenge. Uneven
   by hand instead, and swapped left to right so the two voices differ. */
.dm__msg {
  max-width: 82%;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.4;
}
.dm__msg--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 18px 6px 17px 7px / 7px 18px 6px 17px;
  rotate: -0.5deg;
}
.dm__msg--out {
  align-self: flex-end;
  background: var(--raspberry);
  border: 1.5px solid var(--raspberry-deep);
  color: var(--on-accent);
  border-radius: 6px 18px 7px 17px / 18px 7px 17px 6px;
  rotate: 0.6deg;
}
.dm__meta {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.dm__keyword {
  font-family: var(--headline);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---- Calendar ---------------------------------------------------------- */

.cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-soft);
  padding: 10px;
}
.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal__weekdays {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

/* One cell shape, five states, --hand-soft on all of them and NO rotation on
   any. A date grid is read as a grid, by counting across from the numbers
   around a cell, and a cell that moves when the finger arrives is a cell that
   gets mis-tapped by someone booking a date she cannot change afterwards.
   SYSTEM.md section 3 names the date grid explicitly. */
.cal__day {
  min-height: 38px;
  border-radius: var(--hand-soft);
  padding: 5px 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal__day--blank {
  visibility: hidden;
}
.cal__sub {
  display: block;
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
  opacity: 0.85;
}
/* The customer's picker: a day she can book is white paper with an inked edge.
   The colour is spent on the one she has chosen. */
.cal__day--open {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.cal__day--full {
  background: var(--cream-deep);
  color: var(--muted);
  text-decoration: line-through;
}
.cal__day--selected {
  background: var(--raspberry);
  border-color: var(--raspberry);
  color: var(--on-accent);
}
/* A day the shop is shut on, hatched rather than greyed: closed days stay
   visible so a customer can see the shape of the baker's week and not just its
   holes. */
.cal__day--off {
  background: repeating-linear-gradient(
    -45deg,
    var(--cream-deep),
    var(--cream-deep) 4px,
    var(--surface) 4px,
    var(--surface) 8px
  );
  color: var(--muted);
}
/* The baker reads the same grid as counts rather than choices. */
.cal__day--has-room {
  background: var(--sage-tint);
  border-color: var(--sage-line);
  color: var(--sage-deep);
}
.cal__day--booked-out {
  background: var(--raspberry-tint);
  border-color: var(--raspberry-line);
  color: var(--raspberry-deep);
}
.cal__legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.cal__swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 4px 2px 4px 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.cal__swatch--room {
  background: var(--sage);
}
.cal__swatch--full {
  background: var(--raspberry);
}
.cal__swatch--closed {
  background: var(--closed-swatch);
}

/* ---- Photo stand-in, invoice, label ------------------------------------ */

/* Somebody's cake, so --hand-soft and a small tilt: the app gives the blob to
   the stand-in for a MISSING photo and --hand-soft to a real one, because a
   blob crops the middle out of the picture. */
.photo {
  height: 126px;
  border-radius: var(--hand-soft);
  rotate: -1deg;
  background: linear-gradient(135deg, var(--photo-from), var(--photo-mid) 55%, var(--photo-to));
}
/* The upload on the form, before it is a photo of anything: square, so the
   eight percentage radii read as the organic blob they are rather than
   flattening into an ellipse across the column. */
.photo--thumb {
  width: 104px;
  height: 104px;
  border-radius: 62% 38% 46% 54% / 54% 42% 58% 46%;
  rotate: -4deg;
  margin-left: 4px;
}

/* Sketched and letterpressed, but NOT tilted and NOT torn: this screen exists
   to leave the screen, browsers do not print transforms consistently, and a
   torn bottom edge on a document is a document that looks damaged rather than
   issued. A receipt is a scrap; an invoice is a record. */
.invoice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-c);
  box-shadow: 0 3px 0 var(--line);
}
.invoice__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed var(--line-strong);
}
/* The shop's name on the shop's document, which is the definition of the
   shop's voice: one of exactly two places --display is right in the baker app.
   The other is .label__name, the same name on her sticker. */
.invoice__wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}
/* The one stamp on this document, spent on the number, because the number is
   what an invoice is FOR. No fill: printers drop background colours, so a stamp
   that relied on a tint would print as the quietest thing on the page. */
.invoice__number {
  display: inline-block;
  margin: 0;
  padding: 4px 10px 3px;
  border: 2px solid var(--line-strong);
  border-radius: var(--stamp-radius);
  font-family: var(--headline);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  rotate: var(--tilt-stamp);
}

.label {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  /* --hand-soft rather than --hand-a, and not because a sticker is a control:
     the preview has to be the shape of the thing that comes out of the printer,
     and a wildly sketched edge promises a cut no sheet of Avery 5163 can give
     her. */
  border-radius: var(--hand-soft);
  font-size: 11.5px;
  line-height: 1.4;
}
.label p {
  margin: 0 0 4px;
}
.label__name {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}
/* A micro-label rather than a sentence, so the ingredients are what the eye
   lands on instead of the word "Ingredients". */
.label__key {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
/* The line somebody with an allergy scans for. No fill: printers drop
   background colours by default, and a highlight that vanishes on paper is
   worse than none. */
.label__allergens {
  font-weight: 700;
  padding-left: 8px;
  border-left: 2px solid var(--raspberry);
  margin: 6px 0;
}
.label__statement {
  margin-top: 6px;
  color: var(--ink-soft);
}
.label__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--muted);
}

/* ---- The caption and the stepper --------------------------------------- */

/* The demo's own voice, and it is now a note pinned beside the phone rather
   than a headline above it: the screens do the explaining and this says only
   what a screenshot cannot. */
.caption {
  width: 100%;
  max-width: 460px;
  position: relative;
  background: var(--cream-warm);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--hand-b);
  padding: 16px 18px;
}
.caption__step {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 9px 2px;
  border: 2px solid currentColor;
  border-radius: var(--stamp-radius);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--raspberry-deep);
  background: var(--raspberry-tint);
  rotate: var(--tilt-stamp);
}
.caption__title {
  font-family: var(--headline);
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.caption__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
/* Controls, so --hand-soft and no rotation, but still letterpressed. */
.steps__btn {
  width: 46px;
  height: 46px;
  border-radius: var(--hand-soft);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--line);
}
.steps__btn:hover:not(:disabled) {
  border-color: var(--ink);
}
.steps__btn:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--line);
  transform: translateY(2px);
}
.steps__btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.steps__dots {
  display: flex;
  gap: 7px;
}
.steps__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.steps__dot[data-active] {
  background: var(--raspberry);
  border-color: var(--raspberry-deep);
}
.steps__keys {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: center;
}

.stage__cta {
  width: 100%;
  max-width: 460px;
  text-align: center;
  border-top: 1.5px dashed var(--line-strong);
  padding-top: 18px;
}
/* The seal is the ring; the mark inside it is /logo.svg exactly as drawn. A
   seal never carries our name in place of the mark. SYSTEM.md section 0. */
.seal-lockup {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  margin: 0 auto 12px;
  rotate: -5deg;
}
.seal-lockup .seal {
  width: 100%;
  height: auto;
}
.seal-lockup__mark {
  position: absolute;
  width: 40%;
  height: auto;
  rotate: 5deg;
}
.stage__cta a {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--hand-a);
  border: 1.5px solid var(--raspberry-deep);
  background: var(--raspberry);
  color: var(--on-accent);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--raspberry-deep);
}
.stage__cta a:hover {
  background: var(--raspberry-deep);
  transform: translateY(-2px) rotate(-0.4deg);
  box-shadow: 0 5px 0 var(--raspberry-deep);
}
.stage__cta p {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .screen[data-active] {
    animation: rise 0.22s ease both;
  }
  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 6px;
    }
    to {
      opacity: 1;
      translate: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}