/* Qder.ai product surfaces as page components: branch panel, chain table, tiles,
   the money card and the split layout. Shared by the diner and business landings. */
.biz { padding-block: clamp(3rem, 7vw, 8rem); }
.biz .sc-display { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem); max-width: 24ch; }
.biz .lede { margin-top: 1rem; color: var(--sc-ink-soft); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); max-width: 38rem; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.split.flip { grid-template-columns: 1fr 1.1fr; } .split.flip > :first-child { order: 2; }
.split h3 { font: 800 clamp(1.4rem, 1rem + 1.4vw, 2rem) var(--sc-font-display); margin: 0; }
.split p { margin: .7rem 0 0; color: var(--sc-ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 30rem; }
.split figure { margin: 0; }
.panel { border-radius: 20px; background: #0f1524; color: #fff; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(8,13,28,.45); font-size: 14px; }
.panel .bar2 { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem; background: #141b30; border-bottom: 1px solid #232b44; font-weight: 700; }
.panel .bar2 span { color: #8b96b5; font-weight: 600; font-size: .9em; }
.floor { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 1rem; }
.tb { aspect-ratio: 1; border-radius: 12px; background: #1a2340; display: grid; place-items: center; font-weight: 700; color: #c8d0e8; border: 2px solid transparent; }
.tb.s { background: #1c2f6b; border-color: var(--lift); color: #fff; } .tb.w { background: #4a2a12; border-color: #F2B05C; color: #fff; } .tb.p { background: #14402c; border-color: #35c07a; color: #fff; }
.stats { display: flex; gap: 8px; padding: 0 1rem 1rem; } .stat { flex: 1; background: #141b30; border: 1px solid #232b44; border-radius: 12px; padding: .7rem .9rem; } .stat small { display: block; color: #8b96b5; font-size: .8em; } .stat b { display: block; font: 800 1.5em var(--sc-font-display); }
table.menu { width: 100%; border-collapse: collapse; } table.menu th { text-align: right; color: #8b96b5; font-weight: 600; font-size: .8em; padding: .8rem 1rem; border-bottom: 1px solid #232b44; }
table.menu td { padding: .75rem 1rem; border-bottom: 1px solid #1c2338; } table.menu td.br { color: var(--lift); font-weight: 700; } table.menu td.no { color: #6b7590; } table.menu td.src { color: #8b96b5; font-size: .85em; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; }
.tile small { display: block; color: var(--muted); font-size: .8rem; letter-spacing: .04em; } .tile b { display: block; font: 800 1.9rem var(--sc-font-display); margin-top: .2rem; }
.tile .bars { display: flex; gap: 4px; align-items: flex-end; height: 42px; margin-top: .8rem; } .tile .bars i { flex: 1; background: var(--lift); border-radius: 3px 3px 0 0; opacity: .85; }
.money { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.money h3 { font: 800 clamp(1.4rem, 1rem + 1.4vw, 2rem) var(--sc-font-display); margin: 0; } .money p { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: 1.08rem; max-width: 40rem; }
.money .price { text-align: center; } .money .price b { display: block; font: 800 2.6rem var(--sc-font-display); color: var(--sc-accent); line-height: 1; } .money .price span { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.money a { display: inline-block; margin-top: .8rem; padding: .7rem 1.2rem; border-radius: 12px; background: var(--sc-accent); color: #fff; font-weight: 700; text-decoration: none; }
@media (max-width: 860px) {
  .split, .split.flip { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; }
  .money { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr 1fr; }
}