/* ============================================================
   Restoful — Editorial page system + shared preview primitives
   Used by Product.html, Solutions.html, Examples.html
   ============================================================ */

/* ---------- Page hero ---------- */
.ed-hero { padding: clamp(56px, 7vw, 88px) 0 8px; }
.ed-hero-inner { max-width: 840px; }
.ed-h1 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02;
  letter-spacing: -0.03em; color: var(--forest); margin: 22px 0 0; text-wrap: balance;
}
.ed-h1 em { font-style: normal; font-weight: 800; color: var(--sage); }
.ed-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); margin: 22px 0 0; max-width: 620px; }
.ed-hero-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- Stat band ---------- */
.ed-stats {
  display: flex; flex-wrap: wrap; margin-top: 52px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow);
}
.ed-stat { flex: 1 1 180px; padding: 24px 28px; border-right: 1px solid var(--line); }
.ed-stat:last-child { border-right: 0; }
.ed-stat-v { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--forest); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ed-stat-l { font-size: 13.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
@media (max-width: 720px) { .ed-stat { flex-basis: 50%; } .ed-stat:nth-child(2) { border-right: 0; } }

/* ---------- Feature rows ---------- */
.feat { padding: clamp(56px, 7vw, 88px) 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.feat-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.feat.flip .feat-media { order: -1; }
.feat-eyebrow { display: inline-flex; align-items: center; gap: 11px; }
.feat-eyebrow .fe-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--mint-2); color: var(--sage-2); display: grid; place-items: center; border: 1px solid var(--mint); flex-shrink: 0; }
.feat-eyebrow .fe-txt { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sage-2); }
.feat-h { font-size: clamp(25px, 2.8vw, 37px); font-weight: 700; color: var(--forest); letter-spacing: -0.02em; line-height: 1.12; margin: 22px 0 0; text-wrap: balance; }
.feat-p { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin: 16px 0 0; max-width: 500px; }
.feat-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 15px; }
.feat-li { display: flex; gap: 13px; align-items: flex-start; }
.feat-li .chk { width: 23px; height: 23px; border-radius: 7px; background: var(--mint-2); color: var(--sage-2); display: grid; place-items: center; flex-shrink: 0; font-size: 12px; font-weight: 700; margin-top: 1px; }
.feat-li-t { font-size: 15px; color: var(--ink); line-height: 1.5; }
.feat-li-t b { font-weight: 600; color: var(--ink); }
.feat-cta { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--sage-2); text-decoration: none; transition: gap .15s ease; }
.feat-cta:hover { gap: 13px; }

/* ---------- Media showcase panel ---------- */
.showcase { position: relative; border-radius: 26px; padding: clamp(22px, 3.2vw, 44px); border: 1px solid var(--line); background: radial-gradient(130% 120% at 82% 4%, var(--mint-2) 0%, var(--cream) 58%); }
.showcase-dots { position: absolute; inset: 0; pointer-events: none; opacity: .5; border-radius: 26px; background-image: radial-gradient(circle, rgba(58,110,58,0.16) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(closest-side at 18% 90%, black 0%, transparent 72%); mask-image: radial-gradient(closest-side at 18% 90%, black 0%, transparent 72%); }
.showcase > * { position: relative; }
.po-show { max-width: 460px; width: 100%; margin: 0 auto; }
.po-show.po-show-wide { max-width: 600px; }
.showcase-note { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 9px 15px; font-size: 13px; font-weight: 600; color: var(--forest); box-shadow: var(--shadow); }
.showcase-note .nd { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }

@media (max-width: 920px) {
  .feat-grid { grid-template-columns: 1fr; gap: 40px; }
  .feat.flip .feat-media { order: 0; }
  .feat-p, .feat-list { max-width: none; }
}

/* ---------- Closing module index (Product) ---------- */
.mod-index { padding: clamp(56px, 7vw, 80px) 0; border-top: 1px solid var(--line); }
.mod-index-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mod-chip { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color .15s, transform .15s, box-shadow .15s; }
.mod-chip:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.mod-chip .mc-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--mint-2); color: var(--sage-2); display: grid; place-items: center; border: 1px solid var(--mint); }
.mod-chip .mc-name { font-size: 15px; font-weight: 700; color: var(--forest); }
.mod-chip .mc-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 920px) { .mod-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mod-index-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Solutions outcome strip ---------- */
.sol-outcome { margin-top: 26px; display: inline-flex; align-items: center; gap: 11px; padding: 12px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--sage); border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--forest); }
.sol-outcome .so-ico { color: var(--sage-2); font-size: 15px; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sol-chip { font-size: 12.5px; font-weight: 600; color: var(--sage-2); background: var(--mint-2); border: 1px solid var(--mint); border-radius: 99px; padding: 6px 13px; white-space: nowrap; }

/* ============================================================
   App / module preview primitives (shared)
   ============================================================ */

/* Module card frame */
.po-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.po-card .app-top { gap: 9px; }
.po-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--mint-2); color: var(--sage-2); display: grid; place-items: center; flex-shrink: 0; }
.po-card .app-top .pill { display: inline-flex; align-items: center; gap: 5px; }
.po-pill-live { color: var(--sage-2); }
.po-pill-ai { color: var(--sage-2); background: var(--mint-2); border: 1px solid var(--mint); padding: 2px 8px; border-radius: 99px; }
.po-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; box-shadow: 0 0 0 3px rgba(58,110,58,0.18); }
.po-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }

/* Menus */
.po-cat { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--sage-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.po-cat-n { color: var(--ink-3); font-weight: 500; letter-spacing: .5px; }
.po-mrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; background: var(--paper); }
.po-grip { color: var(--ink-4); font-size: 11px; cursor: grab; }
.po-mtext { flex: 1; min-width: 0; }
.po-mn { font-size: 13px; font-weight: 600; color: var(--ink); }
.po-md { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.po-86 { color: var(--rose); }
.po-mp { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.po-mtoggle { width: 28px; height: 16px; border-radius: 99px; background: var(--line-2); position: relative; flex-shrink: 0; }
.po-mtoggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.po-mtoggle.on { background: var(--sage); }
.po-mtoggle.on::after { left: 14px; }
.po-mrow-off { opacity: 0.7; }
.po-addrow { margin-top: auto; padding: 9px 10px; border: 1px dashed var(--line-2); border-radius: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--sage-2); }

/* Orders */
.po-orders { gap: 8px; }
.po-order { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--mint-3); }
.po-order-l { display: flex; flex-direction: column; gap: 2px; }
.po-onum { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); }
.po-ometa { font-size: 11px; color: var(--ink-3); }
.po-order-r { display: flex; align-items: center; gap: 10px; }
.po-ototal { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.po-ostat { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.po-new { background: var(--mint-2); color: var(--sage-2); border: 1px solid var(--mint); }
.po-prep { background: var(--amber-bg); color: var(--amber); border: 1px solid #FDE68A; }
.po-ready { background: #D9EBDA; color: var(--sage-2); border: 1px solid #BFD8C0; }
.po-order-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.po-mono { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }

/* Payments */
.po-kpi-lite { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.po-kl-l { font-size: 10px; font-family: var(--mono); font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; }
.po-kl-v { font-size: 24px; font-weight: 800; color: var(--forest); letter-spacing: -0.02em; }
.po-pay { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12px; }
.po-card-brand { font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: .5px; color: #fff; background: #1A1F71; padding: 3px 5px; border-radius: 4px; flex-shrink: 0; }
.po-card-brand.mc { background: #EB001B; }
.po-card-brand.amex { background: #2E77BC; }
.po-pay-meta { color: var(--ink-3); flex: 1; font-family: var(--mono); font-size: 11px; }
.po-pay-amt { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.po-pay-foot { margin-top: auto; padding-top: 12px; font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.po-lock { font-size: 10px; }

/* Reservations */
.po-res { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-3); }
.po-res:first-child { padding-top: 2px; }
.po-res-time { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--forest); width: 34px; flex-shrink: 0; }
.po-res-mid { flex: 1; min-width: 0; }
.po-res-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.po-res-meta { font-size: 10.5px; color: var(--ink-3); }
.po-res-stat { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.po-seated { background: var(--mint-2); color: var(--sage-2); border: 1px solid var(--mint); }
.po-conf { background: var(--cream); color: var(--ink-2); border: 1px solid var(--line); }

/* Delivery */
.po-del { padding: 9px 0; border-bottom: 1px solid var(--line-3); }
.po-del-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.po-del-src { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 99px; letter-spacing: .3px; }
.po-del-src.ue { background: #E6F4E6; color: #06773B; }
.po-del-src.dd { background: #FDE7EC; color: #C42855; }
.po-del-bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.po-del-fill { display: block; height: 100%; background: var(--sage); border-radius: 99px; }
.po-del-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ink-3); }

/* Website (inside po-card) */
.po-flush .po-webwrap { padding: 0; }
.po-webwrap { flex: 1; display: flex; flex-direction: column; }
.po-web { display: grid; grid-template-columns: 1fr 0.7fr; flex: 1; }
.po-web-text { background: #F5F0E3; padding: 20px 22px; }
.po-web-btns { display: flex; gap: 7px; }
.po-web-meta { display: flex; gap: 14px; margin-top: 14px; font-family: var(--mono); font-size: 10px; color: #8B7355; }
.po-web-img { position: relative; background-image: radial-gradient(circle at 30% 30%, rgba(217,124,84,0.5), transparent 55%), radial-gradient(circle at 75% 70%, rgba(91,143,91,0.35), transparent 50%), linear-gradient(135deg, #5A3A1E, #2A1810); min-height: 160px; }

/* Design Studio */
.po-studio { display: flex; gap: 14px; align-items: stretch; }
.po-canvas { flex: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #F5F0E3; padding: 16px; min-height: 150px; background-image: radial-gradient(circle at 28% 25%, rgba(217,124,84,0.55), transparent 50%), radial-gradient(circle at 80% 80%, rgba(31,59,31,0.6), transparent 55%), linear-gradient(135deg, #7A3F1E, #2A1810); }
.po-canvas-eyebrow { font-family: var(--mono); font-size: 8px; letter-spacing: 2.4px; color: #F0D9B8; }
.po-canvas-big { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; margin: 6px 0; }
.po-canvas-small { font-size: 9px; color: rgba(255,255,255,0.9); }
.po-studio-side { display: flex; flex-direction: column; gap: 7px; justify-content: center; width: 92px; flex-shrink: 0; }
.po-tpl { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.po-gen { font-size: 11px; font-weight: 700; color: #fff; background: var(--forest); border-radius: 8px; padding: 9px 10px; text-align: center; margin-top: 2px; }

/* Analytics */
.po-analytics { gap: 14px; }
.po-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.po-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: var(--mint-3); }
.po-kpi-k { font-size: 9.5px; font-family: var(--mono); font-weight: 600; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; }
.po-kpi-v { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-top: 3px; }
.po-kpi-t { font-size: 10.5px; font-weight: 700; margin-top: 3px; }
.po-kpi-t.up { color: var(--sage-2); }
.po-chart { border: 1px solid var(--line); border-radius: 12px; padding: 14px; flex: 1; display: flex; flex-direction: column; }
.po-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.po-chart-head .po-mono { font-size: 10.5px; color: var(--sage-2); }
.po-bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.po-bars span { flex: 1; background: var(--mint); border-radius: 4px 4px 0 0; min-height: 6px; }
.po-bar-hi { background: var(--sage) !important; }
.po-bars-x { display: flex; gap: 8px; margin-top: 7px; }
.po-bars-x span { flex: 1; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--ink-4); }

/* CRM */
.po-crm-head, .po-crm-row { display: grid; grid-template-columns: 2fr 0.7fr 0.9fr 1fr; align-items: center; gap: 8px; }
.po-crm-head { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .8px; color: var(--ink-4); text-transform: uppercase; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.po-crm-row { padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 12px; color: var(--ink); }
.po-crm-g { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.po-av { width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--sage-2); display: grid; place-items: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.po-seg { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; justify-self: start; white-space: nowrap; }
.po-seg.vip { background: var(--amber-bg); color: var(--amber); border: 1px solid #FDE68A; }
.po-seg.reg { background: var(--mint-2); color: var(--sage-2); border: 1px solid var(--mint); }
.po-seg.new { background: var(--blue-bg); color: var(--blue); border: 1px solid #BFD3F5; }

/* Integrations */
.po-int { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.po-int-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--paper); }
.po-int-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; }
.po-int-mark.stripe { background: #635BFF; }
.po-int-mark.ue { background: #06C167; }
.po-int-mark.dd { background: #EB1700; }
.po-int-mark.sq { background: #1A1A1A; }
.po-int-mark.gg { background: #4285F4; }
.po-int-mark.mc { background: #FFE01B; color: #1A1A1A; }
.po-int-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.po-int-on { font-size: 10px; font-weight: 700; color: var(--sage-2); display: inline-flex; align-items: center; gap: 5px; }
.po-int-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.po-int-off { font-size: 10px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 10px; }

/* ============================================================
   Phone + Examples preview primitives (shared)
   ============================================================ */
.phone { width: 156px; background: #1A1A1A; border-radius: 28px; padding: 6px; box-shadow: 0 26px 60px -22px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset; flex-shrink: 0; }
.phone-screen { background: #F5F0E3; border-radius: 22px; padding: 12px 9px; position: relative; height: 318px; overflow: hidden; }
.ph-tab { background: transparent; color: #6B4423; border: 0.5px solid #6B4423; padding: 2.5px 7px; border-radius: 99px; font-size: 6.5px; font-family: var(--mono); font-weight: 600; }
.ph-tab.on { background: #6B4423; color: #F5F0E3; border-color: #6B4423; }
.ph-item { background: #fff; border-radius: 8px; padding: 6px 7px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 4px; }
.ph-item > div:first-child { flex: 1; min-width: 0; }
.ph-n { font-size: 8px; color: #2A1810; font-weight: 600; }
.ph-d { font-size: 6.5px; font-style: italic; color: #8B7355; margin-top: 1px; }
.ph-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ph-p { font-size: 8px; color: #2A1810; font-weight: 700; font-family: var(--mono); }
.ph-add { background: #6B4423; color: #F5F0E3; border-radius: 4px; padding: 2px 6px; font-size: 6px; font-weight: 700; font-family: var(--mono); letter-spacing: .3px; }
.ph-cart { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px; background: #6B4423; display: grid; place-items: center; font-size: 14px; box-shadow: 0 4px 10px rgba(107,68,35,0.4); }
.ph-cart-badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #C2522B; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }

/* Before / after */
.ba { display: grid; grid-template-columns: 1fr auto 1.25fr; gap: 22px; align-items: center; }
.ba-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ba-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; }
.ba-before { color: var(--rose); background: var(--rose-bg); border: 1px solid #F8C5CC; }
.ba-after { color: var(--sage-2); background: #D9EBDA; border: 1px solid #BFD8C0; }
.ba-frame { width: 100%; display: flex; justify-content: center; padding: 8px; }
.menu-paper { background: #fff; border: 1px solid #E0E0E0; padding: 16px 14px; font-family: var(--mono); color: #333; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25); }
.menu-paper .m-ttl { text-align: center; font-weight: 700; letter-spacing: 2px; }
.menu-paper .m-sub, .menu-paper .m-stars { text-align: center; color: #888; margin-top: 2px; }
.menu-paper .m-dash { border-top: 1px dashed #bbb; margin: 8px 0; }
.menu-paper .m-sec { font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.menu-paper .m-row > div { display: flex; justify-content: space-between; }
.menu-paper .m-row { line-height: 1.7; }
.menu-paper .m-spec { text-align: center; font-style: italic; color: #999; margin-top: 6px; }
.ba-old { width: 180px; transform: rotate(-1.5deg); }
.ba-old .m-ttl { font-size: 22px; }
.ba-old .m-sub, .ba-old .m-stars { font-size: 8px; }
.ba-old .m-sec { font-size: 9px; }
.ba-old .m-row { font-size: 8px; }
.ba-old .m-spec { font-size: 8px; }
.ba-new { width: 340px; max-width: 100%; border-radius: 8px; padding: 22px 24px; box-shadow: 0 24px 50px -24px rgba(31,59,31,0.28); }
.ba-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ba-mi { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 11.5px; color: #2A1810; margin-top: 9px; }
.ba-mi:first-of-type { margin-top: 8px; }
.ba-mp { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #6B4423; }
.ba-mi-d { font-size: 8.5px; font-style: italic; color: #8B7355; margin-top: 1px; }
.ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ba-arrow-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--forest); background: var(--mint-2); border: 1px solid var(--mint); border-radius: 99px; padding: 5px 11px; white-space: nowrap; }
.ba-arrow-line { font-size: 22px; color: var(--sage); font-weight: 700; }

/* Digital checkout */
.ex-checkout { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: 240px; flex-shrink: 0; }
.exc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.exc-t { font-weight: 700; font-size: 13px; color: var(--ink); }
.exc-mut { font-size: 11px; color: var(--ink-3); }
.exc-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 5px 0; }
.exc-div { height: 1px; background: var(--line); margin: 8px 0; }
.exc-total { font-weight: 700; color: var(--ink); }
.exc-pay { margin-top: 14px; background: var(--forest); color: #fff; text-align: center; padding: 11px; border-radius: 99px; font-weight: 600; font-size: 14px; }
.exc-secure { margin-top: 10px; text-align: center; font-size: 11px; color: var(--ink-3); }

/* QR flow */
.qr-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.qr-step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-step-n { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.qr-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; box-shadow: var(--shadow); }
.qr-code { width: 96px; height: 96px; margin: 10px auto 0; display: grid; place-items: center; }
.qr-flow-arrow { color: var(--sage); font-size: 20px; font-weight: 700; }
.qr-mini-phone { width: 120px; background: #1A1A1A; border-radius: 18px; padding: 14px 8px; }
.qmp-bar { height: 6px; width: 46px; background: #6B4423; border-radius: 99px; margin: 0 auto 10px; }
.qmp-item { display: flex; align-items: center; justify-content: space-between; background: #F5F0E3; border-radius: 7px; padding: 7px 8px; margin-bottom: 6px; font-size: 9px; color: #2A1810; font-weight: 600; }
.qmp-item.on { background: #6B4423; color: #F5F0E3; }
.qmp-add { width: 14px; height: 14px; border-radius: 4px; background: #6B4423; color: #F5F0E3; display: grid; place-items: center; font-size: 11px; }
.qmp-chk { width: 14px; height: 14px; border-radius: 4px; background: #F5F0E3; color: #6B4423; display: grid; place-items: center; font-size: 9px; }
.qr-done { width: 140px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px 14px; text-align: center; box-shadow: var(--shadow); }
.qr-done-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-size: 22px; margin: 0 auto 12px; }
.qr-done-t { font-weight: 700; color: var(--ink); font-size: 14px; }
.qr-done-s { font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: .5px; }
.qr-done-meta { margin-top: 8px; font-size: 11px; color: var(--sage-2); font-weight: 600; }

/* Website */
.site { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.site-hero { display: grid; grid-template-columns: 1fr 0.85fr; gap: 0; }
.site-hero-text { background: #F5F0E3; padding: 36px 36px 32px; }
.site-blurb { color: #5A4A36; font-size: 13.5px; line-height: 1.55; max-width: 320px; margin: 0 0 20px; }
.site-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.site-btn { border: 1px solid #6B4423; color: #6B4423; padding: 9px 18px; border-radius: 6px; font-size: 12px; letter-spacing: .5px; font-family: var(--mono); font-weight: 600; }
.site-btn-solid { background: #6B4423; color: #F5F0E3; }
.site-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: 11px; color: #8B7355; font-family: var(--mono); }
.site-hero-img { background: linear-gradient(135deg, #6B4423, #3A2613); position: relative; min-height: 280px; background-image: radial-gradient(circle at 30% 30%, rgba(217,124,84,0.5), transparent 55%), radial-gradient(circle at 75% 70%, rgba(91,143,91,0.35), transparent 50%), linear-gradient(135deg, #5A3A1E, #2A1810); }
.site-img-tag { position: absolute; bottom: 14px; left: 14px; font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.35); padding: 4px 9px; border-radius: 99px; }

/* Social / Design Studio post */
.ig { width: 248px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ig-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.ig-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--terra), var(--sage)); flex-shrink: 0; }
.ig-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.ig-loc { font-size: 10px; color: var(--ink-3); }
.ig-more { margin-left: auto; color: var(--ink-3); }
.ig-img { aspect-ratio: 1; background-image: radial-gradient(circle at 28% 25%, rgba(217,124,84,0.55), transparent 50%), radial-gradient(circle at 80% 80%, rgba(31,59,31,0.6), transparent 55%), linear-gradient(135deg, #7A3F1E, #2A1810); position: relative; display: flex; align-items: center; justify-content: center; }
.ig-img-overlay { text-align: center; color: #F5F0E3; padding: 16px; }
.ig-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: #F0D9B8; }
.ig-big { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; margin: 8px 0; }
.ig-small { font-size: 10.5px; color: rgba(255,255,255,0.9); letter-spacing: .3px; }
.ig-actions { display: flex; gap: 14px; padding: 10px 12px 4px; font-size: 16px; }
.ig-cap { padding: 0 12px 14px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.ig-cap strong { color: var(--ink); }
.ds-variants { display: flex; flex-direction: column; gap: 10px; }
.ds-chip { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }

@media (max-width: 560px) {
  .ba { grid-template-columns: 1fr; gap: 16px; }
  .ba-arrow { flex-direction: row; }
  .ba-arrow-line { transform: rotate(90deg); }
}