/* Ordopus styles.

   Look: monochrome. Soft grey page, white cards, black pills, big light type.
   Font: Manrope in two weights only, Light (300) and Semibold (600).

   House rules
   - Status colours (amber, green, red) only on words and icons, never as a box fill or border.
   - Outlines are 1px. No glows or rings.
   - Corners are 8px, except buttons and pills, which are fully round.
   - Phone layout: 16px side margins, safe areas respected top and bottom,
     every tappable thing at least 44px, 8 to 12px between controls,
     16px padding inside cards, 28px between sections, body text 16px. */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #f3f3f5;
  --card: #ffffff;
  --ink: #111113;
  --muted: #7f7f88;
  --line: #e6e6eb;
  --soft: #f3f3f5;
  --green-ink: #1c7a4b;
  --amber-ink: #9a6400;
  --red-ink: #b3261e;
  --radius: 8px;
  --light: 300;
  --semi: 600;
  --edge: 16px;   /* side margin */
  --pad: 16px;    /* inside cards */
  --gap: 12px;    /* between controls */
  --section: 28px;
  --tap: 44px;    /* smallest tappable size */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: var(--light);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
b, strong, th { font-weight: var(--semi); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; font-weight: var(--light); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.page {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-right: max(var(--edge), env(safe-area-inset-right));
  padding-left: max(var(--edge), env(safe-area-inset-left));
  /* room for the floating tab bar or the sticky action bar, plus the Home Indicator */
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.035em; font-weight: var(--light); }
.h2 { font-size: 17px; line-height: 1.3; font-weight: var(--semi); letter-spacing: -0.01em; }
/* Section heading: always 28px above, 12px below. Use it for every section on a page. */
.sec-title { font-size: 17px; line-height: 1.3; font-weight: var(--semi); letter-spacing: -0.01em; margin: var(--section) 0 var(--gap); }
/* A title with a quieter line under it: always the same 2px apart. */
.h2 + .small, b + .small, .h2 + .muted, .h1 + .muted { margin-top: 2px; }
.h1 + p { margin-top: 8px; }
/* Inside a stack the 12px gap already applies, so top up to the same 28px above, 12px below. */
.stack > .sec-title { margin: 16px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.4; }
.center { text-align: center; }
.mt { margin-top: var(--gap); } .mt2 { margin-top: var(--section); } .mb { margin-bottom: 16px; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--gap); }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.list { display: flex; flex-direction: column; gap: var(--gap); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: var(--semi); font-size: 17px; letter-spacing: -0.02em; }
.avatar { width: 48px; height: 48px; border-radius: var(--radius); background: var(--card); display: grid; place-items: center; flex: none; }
.iconbtn { width: 48px; height: 48px; border-radius: 999px; border: 0; background: var(--card); display: grid; place-items: center; cursor: pointer; flex: none; }
.iconbtn.soft { background: var(--soft); }
.ico { width: 44px; height: 44px; border-radius: var(--radius); background: var(--soft); display: grid; place-items: center; flex: none; }
.warnico { color: var(--amber-ink); display: inline-flex; }

/* Buttons: filled primary, outlined secondary. Always fully round. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 14px 22px; font-weight: var(--semi); font-size: 16px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer;
  min-height: 54px; transition: transform 0.08s ease; list-style: none; text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn.outline { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.danger { background: var(--card); color: var(--red-ink); border-color: var(--line); }
.btn.block { width: 100%; }
.btn.sm { min-height: var(--tap); padding: 8px 16px; font-size: 14px; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
summary.btn { display: flex; }
summary::-webkit-details-marker { display: none; }
form { margin: 0; }

.card { display: block; background: var(--card); border-radius: var(--radius); padding: var(--pad); }
.card.row, .card.stack, .card.list { display: flex; }
/* Rows inside one card, separated by hairlines (settings-style list). */
.rows { padding-top: 0; padding-bottom: 0; }
.rows > * { padding: 14px 0; }
.rows > * + * { border-top: 1px solid var(--line); }
.card.tap { cursor: pointer; transition: transform 0.08s ease; }
.card.tap:active { transform: scale(0.985); }
.divide > * + * { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }

/* Black hero card with white pill actions */
.hero { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 20px var(--pad) var(--pad); }
.hero .muted { color: rgba(255, 255, 255, 0.62); }
.hero .btn { background: #fff; color: var(--ink); border-color: #fff; min-height: 48px; padding: 10px 12px; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tile { background: var(--card); border-radius: var(--radius); padding: var(--pad); }

/* Text tabs with a thin underline */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0; color: var(--muted);
  border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a.on { color: var(--ink); font-weight: var(--semi); border-color: var(--ink); }

/* Segmented control. Works with links, or with radio buttons inside labels. */
.seg { display: flex; background: #e7e7ec; border-radius: 999px; padding: 4px; gap: 2px; }
.seg > a, .seg > label > span {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--tap);
  border-radius: 999px; padding: 4px 10px; font-size: 15px; line-height: 1.2; text-align: center; color: var(--muted); cursor: pointer;
}
.seg > label { flex: 1; display: flex; }
.seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
.seg > a.on, .seg > label > input:checked + span { background: var(--card); color: var(--ink); font-weight: var(--semi); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 14px; font-weight: var(--semi); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; min-height: 52px;
  background: var(--card); outline: none; font-size: 16px; font-weight: var(--light);
}
.card .field input, .card .field select, .card .field textarea { background: var(--soft); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.err { color: var(--red-ink); font-size: 14px; }
/* Password box with a show/hide button */
.pw { position: relative; }
.pw input { padding-right: 56px; }
.pw button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap);
  border: 0; background: transparent; border-radius: 999px; display: grid; place-items: center; color: var(--muted); cursor: pointer;
}
.pw .off, .pw.shown .on { display: none; }
.pw.shown .off { display: block; }
.check { display: flex; gap: 12px; align-items: center; min-height: var(--tap); font-size: 15px; cursor: pointer; }
/* Round tick boxes and radio buttons, drawn by us so they look the same on every phone. */
.check input {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; flex: none; cursor: pointer;
  border-radius: 999px; border: 1px solid #b9b9c2; background: var(--card) center / 14px no-repeat;
}
.check input:checked {
  background-color: var(--ink); border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* Date field button and the calendar sheet it opens */
.datebtn {
  width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; font-weight: var(--light);
}
.card .datebtn { background: var(--soft); }
.datebtn.empty > span { color: var(--muted); }
.sheet-back { position: fixed; inset: 0; z-index: 30; background: rgba(17, 17, 19, 0.36); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 480px; background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--pad) var(--edge) calc(var(--pad) + env(safe-area-inset-bottom));
}
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head b { font-size: 17px; }
.cal-nav { width: var(--tap); height: var(--tap); border: 0; border-radius: 999px; background: var(--soft); display: grid; place-items: center; cursor: pointer; }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; row-gap: 2px; }
.cal-grid .dow { font-size: 12px; color: var(--muted); height: 28px; display: grid; place-items: center; }
.cal-day { width: var(--tap); height: var(--tap); max-width: 100%; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font-weight: var(--light); padding: 0; }
.cal-day.today { border-color: var(--ink); }
.cal-day.on { background: var(--ink); color: #fff; font-weight: var(--semi); }
.cal-day:disabled { color: #c4c4cc; cursor: not-allowed; }
.cal-foot { display: flex; gap: var(--gap); margin-top: var(--gap); }
.cal-foot .btn { flex: 1; }

/* Item photos: a swipeable strip on the order page, a tile grid in the editor */
.gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-bottom: var(--gap); border-radius: var(--radius); }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--soft); scroll-snap-align: start; }
.gallery.many img { flex: 0 0 86%; width: 86%; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph button {
  position: absolute; top: 0; right: 0; width: var(--tap); height: var(--tap); border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
}
.ph button svg { background: var(--card); border-radius: 999px; padding: 7px; width: 30px; height: 30px; }
.ph.add { border: 1px dashed #c2c2ca; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.ph.add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.variant .vprice { width: 116px; flex: none; }

/* Quantity rows on the order page */
.optrows { margin-top: var(--gap); border-top: 1px solid var(--line); }
.optrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.optrow:last-child { border-bottom: 0; padding-bottom: 0; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: var(--tap); height: var(--tap); border-radius: 999px; border: 0; background: var(--soft); display: grid; place-items: center; cursor: pointer; }
.stepper input {
  width: 44px; height: var(--tap); border: 0; background: transparent; text-align: center; font-weight: var(--semi); font-size: 17px;
  padding: 0; outline: none; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Payment option cards (radio buttons) */
.method { border: 1px solid transparent; cursor: pointer; }
.method > input { position: absolute; opacity: 0; pointer-events: none; }
.method .more, .method .picked { display: none; }
.method:has(input:checked) { border-color: var(--ink); }
.method:has(input:checked) .more { display: block; }
.method:has(input:checked) .picked { display: inline-flex; }
.method > .row { min-height: 28px; }

/* Status pill: neutral fill, colour on the words only, no leading dot. */
.tag {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: var(--semi); background: var(--card); white-space: nowrap;
}
.card .tag, .tile .tag { background: var(--soft); }
.tag.submitted { color: var(--amber-ink); }
.tag.completed, .tag.verified { color: var(--green-ink); }
.tag.rejected, .tag.cancelled { color: var(--red-ink); }

.note { border-radius: var(--radius); padding: 14px var(--pad); font-size: 15px; display: flex; gap: 10px; align-items: flex-start; background: var(--card); }
.card .note { background: var(--soft); }
.note svg { flex: none; margin-top: 3px; }
.note.warn svg { color: var(--amber-ink); }
.note.bad svg { color: var(--red-ink); }

/* Sticky bottom action bar. Sits above the Home Indicator. */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 12px max(var(--edge), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left));
  background: linear-gradient(to top, var(--bg) 74%, rgba(243, 243, 245, 0));
}
.bar > .inner { max-width: 448px; margin: 0 auto; display: flex; gap: var(--gap); align-items: center; }

/* Floating glass tab bar: 3 tabs, the active one is a black pill with its label. */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 6;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; padding: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(17, 17, 19, 0.12);
}
.tabbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; min-width: 50px; padding: 0 14px;
  border-radius: 999px; color: var(--muted); font-weight: var(--semi); font-size: 15px;
}
.tabbar a span { display: none; }
.tabbar a.active { background: var(--ink); color: #fff; padding: 0 20px; }
.tabbar a.active span { display: inline; }
.tabbar .navbrand, .tabbar .navout, .tabbar .navstores, .tabbar .navacct, .tabbar.desk-only { display: none; }

.price { font-weight: var(--semi); letter-spacing: -0.01em; }
.big { font-size: 34px; line-height: 1.1; font-weight: var(--light); letter-spacing: -0.035em; }
.code { font-weight: var(--semi); letter-spacing: 0.06em; }
.kv { display: flex; justify-content: space-between; gap: 16px; }
.kv > :first-child { color: var(--muted); flex: none; }
.kv > :last-child { font-weight: var(--semi); text-align: right; overflow-wrap: anywhere; }
.proof { border-radius: var(--radius); width: 100%; max-height: 440px; object-fit: contain; background: var(--soft); }
.upload {
  border: 1px dashed #c2c2ca; border-radius: var(--radius); padding: 18px var(--pad); min-height: 60px; text-align: center;
  background: var(--card); font-weight: var(--semi); cursor: pointer; display: block;
}
.card .upload { background: var(--soft); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Horizontal progress line */
.prog { display: flex; }
.prog .p { flex: 1; text-align: center; position: relative; font-size: 11px; color: var(--muted); }
.prog .p::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 1px; background: #cfcfd6; }
.prog .p:first-child::before { display: none; }
.prog .dot { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 999px; margin: 0 auto 8px; background: #dcdce3; display: grid; place-items: center; color: #fff; }
.prog .p.done::before, .prog .p.now::before { background: var(--ink); }
.prog .p.done .dot { background: var(--ink); }
.prog .p.now .dot { background: var(--card); border: 1px solid var(--ink); }
.prog .p.now .dot::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--ink); }
.prog .p.done, .prog .p.now { color: var(--ink); }
.prog .p.now { font-weight: var(--semi); }

/* Reject panel on the seller's order page */
details.reject { padding: 0; background: transparent; }
details.reject form { background: var(--card); border-radius: var(--radius); padding: var(--pad); }
details > summary { cursor: pointer; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: var(--semi); font-size: 14px;
  z-index: 20; max-width: calc(100vw - 32px); text-align: center; transition: opacity 0.3s ease;
}
.sms { background: var(--soft); border-radius: var(--radius); padding: 14px var(--pad); font-size: 15px; overflow-wrap: anywhere; }
.qr { width: 200px; height: 200px; margin: 0 auto; border-radius: var(--radius); image-rendering: pixelated; }
table.tally { width: 100%; border-collapse: collapse; }
table.tally td, table.tally th { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); }
table.tally tr:last-child td { border-bottom: 0; }
table.tally td:last-child, table.tally th:last-child { text-align: right; font-weight: var(--semi); }
.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: var(--section); }

/* Order page steps. Without JavaScript all three sections simply show in order. */
.js .wizard section[data-step] { display: none; }
.js .wizard[data-at='1'] section[data-step='1'],
.js .wizard[data-at='2'] section[data-step='2'],
.js .wizard[data-at='3'] section[data-step='3'] { display: block; }
.js .wizard[data-at='2'] section.stack[data-step='2'],
.js .wizard[data-at='3'] section.stack[data-step='3'] { display: flex; }
.js .wizard [data-show] { display: none; }
.js .wizard[data-at='1'] [data-show='1'],
.js .wizard[data-at='2'] [data-show='2'],
.js .wizard[data-at='3'] [data-show='3'] { display: inline-flex; }
.js .wizard[data-at='1'] div[data-show='1'] { display: block; }


/* Small helpers used by the wider layouts below. On a phone they do nothing special. */
.sec-title.first { margin-top: 0; }

/* An organisation's brand on buyer pages: its colour on the main buttons and ticks, its logo beside the store name. */
.branded .btn:not(.outline):not(.danger) { background: var(--brand, var(--ink)); border-color: var(--brand, var(--ink)); color: var(--on-brand, #fff); }
.branded .check input:checked { background-color: var(--brand, var(--ink)); border-color: var(--brand, var(--ink)); }
.branded .prog .p.done .dot { background: var(--brand, var(--ink)); }
.branded .method:has(input:checked) { border-color: var(--brand, var(--ink)); }
.orglogo { border-radius: var(--radius); object-fit: cover; flex: none; background: var(--card); }
.orglogo.big { width: 64px; height: 64px; }
/* Colour choices: round swatches, the chosen one shows a tick */
.field .check input { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 999px; flex: none; }
.field .check span { font-size: 15px; font-weight: var(--light); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
a.tile { color: inherit; text-decoration: none; display: block; }
/* Buttons that open a phone app make no sense with a mouse */
@media (hover: hover) and (pointer: fine) { .phone-only { display: none !important; } }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches span { display: block; width: var(--tap); height: var(--tap); border-radius: 999px; border: 1px solid var(--line); background-position: center; background-repeat: no-repeat; background-size: 18px; }
.swatches input:checked + span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.swatches input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.fit > * + * { margin-top: var(--section); }
.sec-row { margin: var(--section) 0 var(--gap); }
.sec-row.first { margin-top: 0; }
.sec-row .sec-title { margin: 0; }
.tag.flat { padding: 0; background: transparent !important; }
.actions { margin-top: var(--section); }
.rows > a.row { color: inherit; }
.splitgap { margin-top: var(--gap); }
.landing .art { margin-top: 22px; padding: 34px 18px 30px; }
.landing .pitch { text-align: center; margin-top: var(--section); }
.landing .headline { font-size: 40px; }
.editor { display: flex; flex-direction: column; gap: var(--gap); }

/* ============================================================
   iPad and other tablets (768px and wider)
   Same floating tab bar; content gets wider and lists go two across.
   ============================================================ */
@media (min-width: 768px) {
  :root { --edge: 32px; }
  .page { max-width: 560px; padding-top: calc(28px + env(safe-area-inset-top)); }
  .page.wide { max-width: 860px; }
  .bar > .inner { max-width: 496px; }
  .h1 { font-size: 40px; }

  .list.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dash { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); }
  .dash .bento { margin-top: 0; grid-template-columns: 1fr; }
  .dash .hero { display: flex; flex-direction: column; justify-content: space-between; }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .split .splitgap { margin-top: 0; }
  .split .sec-title.splitfirst { margin-top: 0; }
  .narrow { max-width: 480px; width: 100%; }
  /* Columns that fill the width: as many as fit, each at least 320px wide. */
  .fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--section) 24px; align-items: start; }
  .fit > * + * { margin-top: 0; }
  .fit .actions { margin-top: 0; }
  .tallybox { max-width: 640px; }
  .btn.action { width: auto; min-width: 240px; }

  /* Link editor: link details on the left, items on the right */
  .editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; grid-template-areas: 'error error' 'main items' 'ship items' '. items'; gap: 0 24px; align-items: start; }
  .photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .editor .e-error { grid-area: error; margin-bottom: var(--gap); }
  .editor .e-main { grid-area: main; }
  .editor .e-items { grid-area: items; }
  .editor .e-ship { grid-area: ship; }
  .editor .e-items > .sec-title { margin-top: 0; }

  /* Landing: octopus beside the pitch */
  .landing .hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; margin-top: 48px; }
  .landing .art { margin-top: 0; padding: 72px 24px; }
  .landing .pitch { text-align: left; margin-top: 0; }
  .landing .headline { font-size: 52px; }

  /* The calendar opens in the middle of the screen instead of sliding up from the bottom */
  .sheet-back { align-items: center; }
  .sheet { max-width: 400px; border-radius: var(--radius); padding-bottom: var(--pad); }
  .toast { bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Desktop and iPad in landscape (1024px and wider)
   The tab bar becomes a sidebar on the left. Lists go three across on big screens.
   ============================================================ */
@media (min-width: 1024px) {
  .page { padding-bottom: 64px; }
  /* Seller pages use the whole width beside the sidebar, so a wide monitor is filled, not left empty. */
  .page.wide { max-width: 1200px; }
  body.has-nav .page.wide { margin-left: 264px; margin-right: 0; max-width: none; padding-right: 32px; }
  .list.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .editor { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); }
  .editor [data-items] { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--gap); align-items: start; }
  .editor [data-add-item] { max-width: 360px; }
  .page:has(.bar) { padding-bottom: 120px; }

  .tabbar, .tabbar.desk-only {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    left: 24px; top: 24px; bottom: 24px; width: 216px; transform: none;
    padding: 12px; border-radius: var(--radius); background: var(--card);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .tabbar a { justify-content: flex-start; height: 48px; padding: 0 16px; font-weight: var(--light); color: var(--ink); }
  .tabbar a span { display: inline; }
  .tabbar a.active { padding: 0 16px; font-weight: var(--semi); }
  .tabbar a:not(.active):hover { background: var(--soft); }
  .tabbar .navbrand { display: flex; gap: 8px; height: 56px; margin-bottom: 8px; font-size: 17px; letter-spacing: -0.02em; }
  .tabbar .navbrand:hover { background: transparent; }
  .tabbar .navout { display: flex; color: var(--muted); }
  .tabbar .navacct { display: flex; margin-top: auto; }
  /* Store switcher at the top of the sidebar */
  .tabbar .navstores { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .navstore {
    width: 100%; min-height: 44px; border: 0; background: transparent; border-radius: var(--radius); padding: 0 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font-weight: var(--light); font-size: 15px; color: var(--ink);
  }
  .navstore.on { font-weight: var(--semi); background: var(--soft); }
  .navstore:hover { background: var(--soft); }
  .tabbar a.navstore.add { height: 44px; justify-content: flex-start; padding: 0 12px; color: var(--muted); border-radius: var(--radius); }
  .mobile-only { display: none; }
  .toast { bottom: 32px; }

  /* A mouse gets hover feedback; touch screens never see it. */
  .btn:hover { opacity: 0.88; }
  .btn.outline:hover, .btn.danger:hover { opacity: 1; border-color: var(--ink); }
  .card.tap:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .iconbtn:hover, .stepper button:hover, .cal-nav:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .cal-day:not(:disabled):not(.on):hover { background: var(--soft); }
}

@media (min-width: 1280px) {
  /* Seller home on a wide screen: sales card and both tiles in one row */
  .dash { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .dash .bento { display: contents; }
}

/* Seller type: the business fields only show when Registered business is chosen */
.sellertype .biz-only { display: none; }
.sellertype:has(input[value=business]:checked) .biz-only { display: flex; }
.sellertype:has(input[value=business]:checked) .occ-only { display: none; }
.sellertype .check span.small { line-height: 1.45; }

/* Confirmation card */
.sheet.confirm { z-index: 31; }
.sheet.confirm h2 { font-size: 20px; letter-spacing: -0.02em; font-weight: var(--semi); margin: 4px 0 0; }
.sheet.confirm p { margin: 8px 0 0; }
.confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.sheet-back:has(.confirm) { z-index: 60; animation: fade-in 0.15s ease both; }
.sheet.confirm { animation: rise-in 0.2s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Back button and page title stay at the top while the page scrolls */
.page .row.between.mb:has(> .iconbtn) {
  position: sticky; top: 0; z-index: 30;
  margin: calc(-16px - env(safe-area-inset-top)) calc(var(--edge) * -1) 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--edge) 10px;
  background: rgba(243, 243, 245, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ============================================================
   The public website and the Terms / Privacy pages.
   One system: every section is a "band" (a white panel) with the same inner padding (--mk-pad),
   the hero uses the same padding, and everything is left-aligned to that one edge.
   ============================================================ */
.desk-only { display: none; }
.btn.white { background: #fff; color: var(--ink); border-color: #fff; }
.btn.glass { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mk { --mk-pad: 20px; --mk-gap: 12px; display: flex; flex-direction: column; gap: var(--mk-gap); }
.mk.page.wide { max-width: none; }
.mk-title { font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; font-weight: var(--light); margin: 0; }
.mk-title b { font-weight: var(--semi); }
.mk .band { background: var(--card); border-radius: var(--radius); padding: 28px var(--mk-pad); min-width: 0; }
.mk .band-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mk .band.dark { background: var(--ink); color: #fff; }

/* hero */
.mhero { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 660px; display: flex; flex-direction: column; color: var(--ink); padding: 16px var(--mk-pad) var(--mk-pad); background: #e9eaec; }
.mhero .bg { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 52%; object-fit: cover; object-position: 80% 30%; }
.mhero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, #eceef0 0%, #e9eaec 46%, #e9eaec 50%, rgba(233, 234, 236, 0) 66%); }
.mhero > :not(.bg):not(.shade) { position: relative; }
.mhero .copy { margin-top: 24px; }
.mhero h1 { font-size: 40px; line-height: 1.04; letter-spacing: -0.04em; font-weight: var(--light); }
.mhero h1 b { font-weight: var(--semi); }
.mhero .copy p { font-size: 17px; margin-top: 12px; color: #4b4b55; }
.mhero .cta-row { gap: 8px; margin: 20px 0 28px; flex-wrap: wrap; }
.mhero .btn.outline { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mhero .float { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); max-width: 320px; animation: o-float 6s var(--o-ease, ease-in-out) infinite; }
.mhero .float .ico { background: var(--ink); color: #fff; }
.mhero .float .small { color: var(--muted); }

/* intro: one line from Octo, then three equal tiles */
.mk .say { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.mk .say .octo { flex: none; }
.mk .big-say { font-size: 26px; line-height: 1.2; letter-spacing: -0.03em; font-weight: var(--light); margin: 0; }
.mk .big-say b { font-weight: var(--semi); }
.mk .bento3 { display: grid; gap: var(--mk-gap); }
.mk .bento3 > * { min-height: 240px; border-radius: var(--radius); }
.mk .tile-dark { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.mk .tile-dark svg { color: #fff; }
.mk .tile-dark p { margin: 0; }
.mk .tile-dark b { color: #fff; font-weight: var(--light); }
.mk .tile-soft { background: var(--soft); padding: 24px; }
.mk .tile-soft .amount { font-size: 64px; line-height: 1; letter-spacing: -0.04em; font-weight: var(--light); margin-bottom: 8px; }
.mk .tile-img { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: #e4e2de; }
.mk .tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk .glasslabel { position: absolute; left: 12px; bottom: 12px; color: var(--ink); font-weight: var(--semi); font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.ticks li { display: flex; align-items: center; gap: 8px; }

/* carousels */
.car .track { display: flex; gap: var(--mk-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: calc(var(--mk-pad) * -1); padding-right: var(--mk-pad); scroll-padding-left: 0; }
.car .track::-webkit-scrollbar { display: none; }
.car .track > * { scroll-snap-align: start; flex: none; margin: 0; }
.car-nav { display: flex; gap: 8px; flex: none; }
.car-nav .iconbtn { background: var(--soft); }
.car-nav .iconbtn:disabled { opacity: 0.4; cursor: default; }
.car.fits .car-nav { display: none; }

/* words picked out with a soft lilac marker */
.mk mark { background: linear-gradient(transparent 58%, #dccdf2 58%); color: inherit; padding: 0 2px; }
.mhero .copy p.best { font-size: 19px; color: var(--ink); font-weight: var(--semi); max-width: 22em; line-height: 1.35; }

/* how it works: a stepper beside an iPhone showing that step */
.mk .how { display: grid; gap: 32px; min-width: 0; }
.mk .how-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; min-width: 0; }
.mk .steps { list-style: none; padding: 0; margin: 0; display: flex; width: 100%; }
.mk .steps li { flex: 1; position: relative; min-width: 0; }
.mk .steps li:not(:last-child)::after { content: ''; position: absolute; top: 21px; left: 44px; right: 0; height: 1px; background: var(--line); }
.mk .steps li.done:not(:last-child)::after { background: var(--ink); }
.mk .steps button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: none; border: 0; padding: 0 8px 0 0; cursor: pointer; text-align: left; color: var(--muted); font: inherit; width: 100%; min-height: var(--tap); }
.mk .steps .sdot { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--soft); color: var(--ink); display: grid; place-items: center; font-weight: var(--semi); position: relative; z-index: 1; transition: background 0.25s ease, color 0.25s ease; }
.mk .steps .lbl { font-size: 14px; line-height: 1.25; }
.mk .steps button:focus { outline: none; }
.mk .steps button:focus-visible .sdot { outline: 1px solid var(--ink); outline-offset: 3px; }
.mk .steps button.on, .mk .steps li.done button { color: var(--ink); }
.mk .steps button.on .sdot, .mk .steps li.done .sdot { background: var(--ink); color: #fff; }
.mk .steps button.on .lbl { font-weight: var(--semi); }
.mk .panels { width: 100%; }
.mk .panel { display: none; }
.mk .panel.on { display: block; animation: mk-in 0.35s ease both; }
.mk .panel .bignum { font-size: 72px; line-height: 0.9; letter-spacing: -0.05em; font-weight: var(--light); }
.mk .panel h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: var(--semi); margin: 12px 0 0; }
.mk .panel p { margin: 8px 0 0; font-size: 17px; max-width: 26em; }
@keyframes mk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* iPhone: titanium band, side keys, black bezel, Dynamic Island, status bar, home bar */
.iphone { position: relative; width: min(100%, 300px); margin: 0 auto; padding: 4px; border-radius: 56px; background: linear-gradient(135deg, #e6e4df 0%, #a9a7a2 22%, #d8d6d1 48%, #8f8d89 76%, #cfcdc8 100%); box-shadow: 0 30px 60px -28px rgba(20, 16, 40, 0.45), 0 0 0 1px #77756f; }
.iphone::before { content: ''; position: absolute; inset: 4px; border-radius: 52px; background: #0b0b0d; }
/* antenna lines on the band */
.iphone::after { content: ''; position: absolute; inset: 0; border-radius: 56px; pointer-events: none; background:
  linear-gradient(#77756f, #77756f) 0 78px / 4px 3px no-repeat, linear-gradient(#77756f, #77756f) 100% 78px / 4px 3px no-repeat,
  linear-gradient(#77756f, #77756f) 0 calc(100% - 78px) / 4px 3px no-repeat, linear-gradient(#77756f, #77756f) 100% calc(100% - 78px) / 4px 3px no-repeat; }
.iphone .key { position: absolute; width: 4px; background: linear-gradient(90deg, #8f8d89, #d8d6d1); border-radius: 2px; }
.iphone .k1 { left: -3px; top: 16%; height: 4.5%; }
.iphone .k2 { left: -3px; top: 24%; height: 8%; }
.iphone .k3 { left: -3px; top: 34%; height: 8%; }
.iphone .k4 { right: -3px; top: 28%; height: 12.5%; background: linear-gradient(270deg, #8f8d89, #d8d6d1); }
.iphone .screen { position: relative; z-index: 1; margin: 9px; border-radius: 43px; overflow: hidden; background: var(--bg); aspect-ratio: 390 / 844; display: flex; flex-direction: column; }
.iphone .status { flex: none; height: 6.4%; min-height: 34px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 9% 1.2%; font-size: 13px; color: var(--ink); position: relative; }
.iphone .status b { font-weight: var(--semi); letter-spacing: -0.01em; }
.iphone .sys { display: flex; gap: 5px; align-items: center; }
.iphone .sys svg { fill: currentColor; }
.iphone .island { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 31%; height: 62%; min-height: 20px; border-radius: 999px; background: #000; }
.iphone .island i { position: absolute; right: 16%; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 999px; background: radial-gradient(circle at 35% 35%, #3a3f5c, #0c0d14 60%); }
.iphone .views { position: relative; flex: 1; min-height: 0; }
.iphone .views img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.45s ease; }
.iphone .views img.on { opacity: 1; }
.iphone .homebar { position: absolute; left: 50%; bottom: 7px; width: 36%; height: 5px; margin-left: -18%; border-radius: 999px; background: rgba(17, 17, 19, 0.85); z-index: 2; }

/* use cases + what it handles */
.mk .uses .track > * { width: min(78%, 420px); aspect-ratio: 4 / 5; }
.mk .feat { display: grid; gap: 4px 32px; margin-top: 28px; }
.mk .feat .row { padding: 14px 0; border-top: 1px solid var(--line); align-items: flex-start; gap: 12px; }
.mk .feat .ico { background: var(--soft); }

/* two-column bands: pricing, questions */
.mk .split { display: grid; gap: 24px; }
.mk .split .side { min-height: 260px; }
.mk .split .side img { object-position: 86% center; }
.mk .side-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.mk .prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-gap); width: 100%; }
.mk .price { background: var(--soft); border-radius: var(--radius); padding: 16px; }
.mk .price .amount { font-size: 32px; letter-spacing: -0.03em; font-weight: var(--light); margin-top: 6px; }
.mk .price p { margin: 2px 0 0; }
.mk .note-line { margin: 0; }
.mk .trust { display: flex; gap: 12px; align-items: center; background: var(--soft); border-radius: var(--radius); padding: 16px; width: 100%; }
.mk .trust .octo { flex: none; }
.faq { display: grid; gap: 0; min-width: 0; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; min-height: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform 0.2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 8px 0 0; }

/* closing band and footer */
.mk .cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mk .cta .octo { flex: none; }
.mk-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 16px var(--mk-pad) 8px; }

.prose { max-width: 720px; }
.prose h2 { font-size: 17px; font-weight: var(--semi); margin-top: 28px; }
.prose p { margin-top: 8px; line-height: 1.6; }
.prose h1 + p { margin-top: 4px; }

@media (min-width: 768px) {
  .desk-only { display: inline-flex; }
  .mk { --mk-pad: 40px; --mk-gap: 16px; }
  .mk-title { font-size: 40px; }
  .mk .band { padding: 48px var(--mk-pad); }
  .mk .band-head { margin-bottom: 32px; }
  .mhero { min-height: clamp(600px, 74vh, 820px); padding: 24px var(--mk-pad) var(--mk-pad); }
  .mhero .bg { top: 0; height: 100%; object-position: center 40%; }
  .mhero .shade { background: linear-gradient(90deg, rgba(240, 241, 243, 0.92) 0%, rgba(240, 241, 243, 0.78) 34%, rgba(240, 241, 243, 0) 62%); }
  .mhero .copy { margin-top: 64px; max-width: 46%; }
  .mhero h1 { font-size: clamp(56px, 5.4vw, 88px); }
  .mhero .copy p { font-size: 19px; }
  .mk .say { flex-direction: row; align-items: center; gap: 28px; margin-bottom: 32px; }
  .mk .big-say { font-size: clamp(30px, 2.8vw, 44px); max-width: 22em; }
  .mk .bento3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk .bento3 > * { min-height: 300px; }
  .mk .how { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
  .mk .how-copy { gap: 32px; }
  .mk .panel .bignum { font-size: 96px; }
  .mk .panel h3 { font-size: 30px; }
  .mk .steps .lbl { font-size: 15px; }
  .iphone { width: min(100%, 320px); }
  .mhero .copy p.best { font-size: 22px; }
  .mk .uses .track > * { width: clamp(280px, 26vw, 440px); }
  .mk .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .mk .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: stretch; }
  .mk .split .side { min-height: 420px; }
  .mk .side-copy { justify-content: center; gap: 24px; }
  .mk .faqband .side-copy { justify-content: flex-start; }
  .mk .price { padding: 20px; }
  .mk .price .amount { font-size: 40px; }
  .mk .cta { flex-direction: row; align-items: center; gap: 24px; }
  .mk-foot { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1280px) { .mk { --mk-pad: 56px; } }

/* ============================================================
   The console: banner, tabs, stat cards with small charts, tables
   ============================================================ */
.console .cbanner { position: relative; overflow: hidden; border-radius: var(--radius); color: #fff; padding: 16px 16px 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 13px, rgba(194, 179, 221, 0.07) 13px 16px, rgba(255, 255, 255, 0) 16px 31px),
    radial-gradient(120% 140% at 85% 0%, #7b4a8f 0%, #4a0641 38%, #240127 78%); }
.console .cbanner .date { font-size: 13px; opacity: 0.8; }
.console .cbanner .mid { align-items: flex-end; margin-top: 20px; gap: 12px; }
.console .cbanner h1 { font-size: 34px; line-height: 1.05; letter-spacing: -0.035em; font-weight: var(--light); }
.console .cbanner h1 b { font-weight: var(--semi); font-style: italic; }
.console .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.console .chips span { font-size: 13px; font-weight: var(--semi); padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.console .mascot { flex: none; margin-bottom: 8px; }
.console .mascot .octo { width: 96px; height: 96px; }
.console .ctabs { display: flex; gap: 4px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.console .ctabs a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 15px; padding: 12px 16px; min-height: var(--tap); border-radius: var(--radius) var(--radius) 0 0; white-space: nowrap; }
.console .ctabs a.on { background: var(--bg); color: var(--ink); font-weight: var(--semi); }
.console .cgrid { display: grid; gap: var(--gap); margin-top: var(--gap); }
.console .stat .figure { font-size: 40px; line-height: 1.1; letter-spacing: -0.035em; font-weight: var(--light); margin: 10px 0 14px; }
.console .stat .small svg { vertical-align: -2px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 88px; }
.bars span { flex: 1; background: var(--ink); border-radius: 3px 3px 0 0; min-height: 4px; }
.bars span.zero { background: var(--line); }
.bars span.now:not(.zero) { background: #8f6fc4; }
.bars-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.meter { height: 14px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.meter span { display: block; height: 100%; background: #8f6fc4; border-radius: 999px; }
.console .inset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--soft); border-radius: var(--radius); padding: 12px; margin-top: 14px; }
.console .inset div { display: flex; flex-direction: column; gap: 2px; }
.console .panel { margin-top: var(--gap); padding: 0; }
.console .panel .head { padding: var(--pad); }
.console .panel h2 { font-size: 20px; letter-spacing: -0.02em; font-weight: var(--semi); }
.console .panel .pad { padding: 0 var(--pad) var(--pad); }
.tablewrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; min-width: 720px; }
table.grid th { text-align: left; font-size: 13px; font-weight: var(--light); color: var(--muted); background: var(--soft); padding: 10px var(--pad); white-space: nowrap; }
table.grid td { padding: 12px var(--pad); border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.grid td:last-child { text-align: right; }
@media (min-width: 768px) {
  .console .cbanner { padding: 24px 28px 0; }
  .console .cbanner h1 { font-size: 46px; }
  .console .mascot .octo { width: 150px; height: 150px; }
  .console .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.console.page.wide { max-width: none; }

/* ============================================================
   Octo: how the octopus moves.
   Plain CSS on the drawing's own parts, so there is no animation library to load.
   Each part turns around the point where it joins the body. Everything stops for
   people who have asked their device for reduced motion.
   ============================================================ */
.logo { border-radius: 999px; flex: none; }
.octo { border-radius: 999px; cursor: pointer; -webkit-user-select: none; user-select: none; --o-ease: cubic-bezier(0.45, 0, 0.55, 1); }
.octo g { transform-box: view-box; will-change: transform; }
/* Idle: the whole body bobs, the head leans a little, the face glances around, each tentacle curls on its own beat. */
.octo .o-float { transform-origin: 862px 1150px; animation: o-float 5.6s var(--o-ease) infinite; }
.octo .o-head { transform-origin: 862px 1130px; animation: o-lean 11s var(--o-ease) infinite; }
.octo .o-face { animation: o-glance 9s var(--o-ease) infinite; }
.octo .o-arm { animation: o-sway 5.2s var(--o-ease) infinite; }
.octo .o-arm-l { transform-origin: 540px 1090px; animation-delay: -0.4s; }
.octo .o-arm-cl { transform-origin: 720px 1100px; animation-name: o-sway-b; animation-duration: 6.1s; animation-delay: -1.9s; }
.octo .o-arm-cr { transform-origin: 990px 1100px; animation-duration: 5.7s; animation-delay: -3.1s; }
.octo .o-arm-r { transform-origin: 1180px 1085px; animation-name: o-sway-b; animation-duration: 4.9s; animation-delay: -2.6s; }
.octo .o-eye-r { transform-origin: 1022px 848px; animation: o-blink 6.4s ease-in-out infinite; }
.octo .o-eye-l { transform-origin: 592px 848px; animation: o-blink 6.4s ease-in-out infinite; }

/* hello: the right arm waves and the right eye winks */
.octo.m-hello .o-arm-r, .octo.m-tick .o-arm-r { animation: o-wave 4.8s var(--o-ease) infinite; }
.octo.m-hello .o-eye-r { animation: o-wink 4.8s ease-in-out infinite; }
.octo.m-hello .o-eye-l { animation: o-blink-late 4.8s ease-in-out infinite; }
/* check: looking closely, a slow tilt and quicker blinks */
.octo.m-check .o-head { animation: o-tilt 4.4s var(--o-ease) infinite; }
.octo.m-check .o-eye { animation-duration: 3.2s; }
/* slip (preparing): busy arms */
.octo.m-slip .o-arm { animation-duration: 2s; }
/* sleep: eyes closed, slow breathing, arms barely moving */
.octo.m-sleep .o-eye { animation: none; transform: scaleY(0.08); }
.octo.m-sleep .o-arm { animation-duration: 11s; }
.octo.m-sleep .o-head, .octo.m-sleep .o-face { animation: none; }
.octo.m-sleep .o-float { animation: o-breathe 6.5s var(--o-ease) infinite; }
/* small sizes only blink */
.octo.sm .o-float, .octo.sm .o-arm, .octo.sm .o-head, .octo.sm .o-face { animation: none; }
/* one spin: on welcome screens, on a confirmed order, and whenever Octo is tapped */
.octo.twirl { animation: o-twirl 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both; }

@keyframes o-float {
  0%, 100% { transform: translateY(12px) scale(1.012, 0.988); }
  50% { transform: translateY(-20px) scale(0.992, 1.01); }
}
@keyframes o-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, 0.98); } }
@keyframes o-lean { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes o-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes o-glance {
  0%, 38%, 100% { transform: translate(0, 0); }
  46%, 60% { transform: translate(16px, -4px); }
  70%, 84% { transform: translate(-14px, 3px); }
}
@keyframes o-sway {
  0%, 100% { transform: rotate(-5deg) scale(1, 0.97); }
  50% { transform: rotate(6deg) scale(1, 1.05); }
}
@keyframes o-sway-b {
  0%, 100% { transform: rotate(5deg) scale(1, 1.04); }
  50% { transform: rotate(-6deg) scale(1, 0.97); }
}
@keyframes o-wave {
  0%, 62%, 100% { transform: rotate(0); }
  12% { transform: rotate(-30deg); } 22% { transform: rotate(-12deg); }
  32% { transform: rotate(-30deg); } 42% { transform: rotate(-12deg); }
  52% { transform: rotate(-26deg); }
}
@keyframes o-blink {
  0%, 44%, 50%, 90%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(0.08); }
  93%, 95% { transform: scaleY(0.08); }
}
/* the wink is the right eye alone; later in the same beat both eyes blink together */
@keyframes o-wink { 0%, 26%, 44%, 84%, 92%, 100% { transform: scaleY(1); } 32%, 38% { transform: scaleY(0.08); } 88% { transform: scaleY(0.08); } }
@keyframes o-blink-late { 0%, 84%, 92%, 100% { transform: scaleY(1); } 88% { transform: scaleY(0.08); } }
@keyframes o-twirl {
  0% { transform: rotate(0) scale(1); }
  18% { transform: rotate(-14deg) scale(0.96); }
  70% { transform: rotate(372deg) scale(0.9); }
  86% { transform: rotate(356deg) scale(1.02); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .octo, .octo * { animation: none !important; }
}