:root {
  --bg: #050608;
  --bg-2: #08090a;
  --panel: rgba(255,255,255,.045);
  --panel-strong: rgba(255,255,255,.075);
  --surface: #0f1011;
  --surface-2: #191a1b;
  --text: #f7f8f8;
  --muted: #a2a8b3;
  --muted-2: #62666d;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --accent: #7170ff;
  --accent-2: #5e6ad2;
  --success: #27a644;
  --paper: #f8fafc;
  --ink: #0f172a;
  --walkons-navy: #03045e;
  --walkons-red: #ff1e2d;
  --walkons-sky: #56c1ff;
  color-scheme: dark;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv01", "ss03";
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% -14%, rgba(113,112,255,.22), transparent 32rem),
    radial-gradient(circle at 85% 6%, rgba(94,106,210,.16), transparent 28rem),
    linear-gradient(180deg, #050608 0%, #08090a 48%, #050608 100%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 4.5rem);
  background: rgba(5,6,8,.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:.75rem; min-width: max-content; }
.brand-mark {
  width: 2.45rem;
  height: 2.45rem;
  display:grid;
  place-items:center;
  border-radius: .78rem;
  background: linear-gradient(135deg, rgba(113,112,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 0 36px rgba(113,112,255,.20);
}
.brand-mark img {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}
.brand strong, .brand em { display:block; line-height:1; }
.brand strong { letter-spacing:-.035em; }
.brand em { color: var(--muted); font-style: normal; font-size:.78rem; margin-top:.22rem; }
nav { display:flex; align-items:center; gap: 1.15rem; font-size:.88rem; font-weight: 510; color: var(--muted); }
nav a:hover { color: var(--text); }
.nav-cta { color: var(--text); padding:.66rem .95rem; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,.035); }
.nav-cta:hover { background: rgba(255,255,255,.07); }
.hero {
  display:grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items:center;
  padding: clamp(2.75rem, 6.25vw, 5.5rem) clamp(1rem, 5vw, 5rem) 4rem;
  min-height: 84vh;
}
.eyebrow { color: #9ea7ff; text-transform: uppercase; letter-spacing:.15em; font-weight:800; font-size:.73rem; margin:0 0 1rem; }
h1, h2, h3, p { text-wrap: pretty; }
h1 {
  font-size: clamp(3.25rem, 7.6vw, 7.35rem);
  line-height:.89;
  letter-spacing:-.078em;
  font-weight: 600;
  margin:0;
  max-width: 10.5ch;
}
h2 { font-size: clamp(2.1rem, 4.2vw, 4.45rem); line-height:.95; letter-spacing:-.06em; font-weight: 570; margin:0; }
h3 { font-size:1.13rem; margin:0 0 .7rem; letter-spacing:-.025em; }
.lede, .section-heading p, .proof-copy p { color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height:1.62; max-width: 49rem; }
.hero-actions, .demo-actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top: 2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height: 46px; padding:.86rem 1.12rem; border-radius:999px; font-weight:760; border:1px solid transparent; cursor:pointer; }
.button.primary { background: #f7f8f8; color:#08090a; box-shadow: 0 16px 48px rgba(255,255,255,.10); }
.button.primary:hover { background:#ffffff; transform: translateY(-1px); }
.button.secondary { border-color: var(--line); background: rgba(255,255,255,.035); color: var(--text); }
.button.secondary:hover { background: rgba(255,255,255,.07); }
.trust-row { display:flex; flex-wrap:wrap; gap:.55rem; margin-top: 1.35rem; color: var(--muted); }
.trust-row span { padding:.45rem .7rem; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,.025); font-size:.82rem; font-weight:650; }
.hero-panel { display:grid; gap: 1rem; }
.system-card, .founder-card, .proof-card, .service-grid article, .process-grid div, .team-card {
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-radius: 1.35rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.system-card, .founder-card { overflow:hidden; }
.system-card-top, .founder-card-top { display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line); color:var(--text); }
.system-card-top em, .founder-card-top em { margin-left:auto; color:var(--muted-2); font-style:normal; font-size:.8rem; font-family:'JetBrains Mono', ui-monospace, monospace; }
.status-dot { width:.58rem; height:.58rem; border-radius:999px; background: var(--success); box-shadow:0 0 18px rgba(39,166,68,.8); }
.pipeline { display:grid; gap:.68rem; padding:1.15rem; }
.pipeline div { display:flex; align-items:center; gap:.75rem; padding:.85rem; border:1px solid rgba(255,255,255,.055); border-radius:.85rem; background:rgba(0,0,0,.18); }
.pipeline b { color:#9ea7ff; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.82rem; }
.pipeline span { color:#d0d6e0; font-weight:650; }
pre { margin:0; padding:1rem 1.15rem; white-space:pre-wrap; color:#d0d6e0; border-top:1px solid var(--line); background:rgba(0,0,0,.20); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.84rem; line-height:1.7; }
.founder-photo-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.85rem; padding:1rem; }
.founder-photo-card { position:relative; overflow:hidden; min-height: 430px; border-radius:1rem; background:#000; border:1px solid rgba(255,255,255,.08); }
.founder-photo-card img { width:100%; height:100%; object-fit:cover; }
.founder-photo-card div { position:absolute; inset:auto .75rem .75rem; padding:.85rem; border-radius:.9rem; background:rgba(5,6,8,.72); border:1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); }
.founder-photo-card h2 { font-size: clamp(1.4rem, 2.8vw, 2.15rem); line-height:1; margin:0; letter-spacing:-.055em; }
.founder-photo-card .eyebrow { margin:0 0 .45rem; font-size:.62rem; }
.founder-note { margin:0; padding:0 1.05rem 1.1rem; color:var(--muted); line-height:1.55; }
.hero-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hero-metrics div { padding:1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.025); }
.hero-metrics strong, .hero-metrics span { display:block; }
.hero-metrics span { color:var(--muted); margin-top:.35rem; line-height:1.45; font-size:.9rem; }
.section { padding: 5.5rem clamp(1rem, 5vw, 5rem); }
.section-heading { max-width: 66rem; margin-bottom:2.1rem; }
.section-heading.narrow { max-width: 58rem; }
.service-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem; }
.service-grid article { padding:1.25rem; min-height: 250px; }
.service-icon { display:inline-flex; margin-bottom:1.8rem; color:#9ea7ff; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.78rem; }
.service-grid p, .work-list span, .demo-callout p, .process-grid span, .team-card p { color: var(--muted); line-height:1.58; }
.process-section { padding-top:2rem; }
.process-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1rem; }
.process-grid div { padding:1.35rem; }
.process-grid b { display:block; font-size:1.05rem; margin-bottom:.65rem; color:var(--text); }
.proof-section { display:grid; grid-template-columns: .9fr 1.1fr; gap:2rem; align-items:center; }
.proof-card { overflow:hidden; }
.proof-window-top { display:flex; gap:.45rem; padding:1rem; border-bottom:1px solid var(--line); }
.proof-window-top span { width:.7rem; height:.7rem; border-radius:999px; background:var(--muted-2); }
.proof-window-top span:first-child { background:#ff5f57; }
.proof-window-top span:nth-child(2) { background:#febc2e; }
.proof-window-top span:nth-child(3) { background:#28c840; }
.proof-lines { display:grid; padding:1rem; gap:.75rem; }
.proof-lines div { display:grid; gap:.32rem; padding:1rem; border-radius:.95rem; background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.055); }
.proof-lines small { color:var(--muted-2); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.7rem; letter-spacing:.12em; }
.proof-lines strong { font-size:1.02rem; }
.team-section { padding-top:2rem; }
.early-team-section {
  padding-top: 1.5rem;
  padding-bottom: 4.75rem;
  border-top: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}
.team-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.team-card { overflow:hidden; display:grid; grid-template-columns: 210px minmax(0, 1fr); align-items:stretch; min-height: 285px; }
.team-card img { width:100%; height:100%; object-fit:cover; background:#000; }
.team-card div { padding:1.35rem; align-self:center; }
.team-card h3 { font-size:1.8rem; letter-spacing:-.045em; margin-bottom:.65rem; }
.team-card .eyebrow { margin-bottom:.65rem; font-size:.66rem; }
.demo-callout {
  margin: 2rem clamp(1rem, 5vw, 5rem) 5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  display:flex;
  justify-content:space-between;
  gap:2rem;
  align-items:center;
  border-radius:1.55rem;
  background: linear-gradient(135deg, rgba(113,112,255,.16), rgba(255,255,255,.04));
  border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.demo-callout div { max-width: 64rem; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1rem, 5vw, 5rem); border-top:1px solid rgba(255,255,255,.06); color: var(--muted); }
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card { grid-template-columns: 170px minmax(0,1fr); }
}
@media (max-width: 980px) {
  .site-header { position:static; align-items:flex-start; }
  nav { display:none; }
  .hero, .proof-section { grid-template-columns: 1fr; }
  .hero { min-height:auto; }
  h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .process-grid, .service-grid, .team-grid { grid-template-columns: 1fr; }
  .demo-callout, footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 620px) {
  .hero, .section { padding-left:.9rem; padding-right:.9rem; }
  .hero-metrics, .founder-photo-grid, .team-card { grid-template-columns: 1fr; }
  .founder-photo-card { min-height: 360px; }
  .team-card img { height: 320px; }
  .demo-callout { margin-left:.9rem; margin-right:.9rem; }
}

/* Walk-On's demo */
.walkons-body { background: #f5f6fb; color:#101421; color-scheme: light; }
.demo-nav { background: var(--walkons-navy); color:white; border:0; }
.demo-nav .brand-mark { background: var(--walkons-red); color:white; }
.demo-nav .brand em { color: rgba(255,255,255,.72); }
.demo-nav nav a { color: rgba(255,255,255,.82); }
.walkons-hero { position:relative; overflow:hidden; display:grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); gap:2rem; padding: clamp(2rem, 5vw, 4rem); background: var(--walkons-navy); color:white; }
.walkons-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(86,193,255,.36), transparent 18rem), radial-gradient(circle at 90% 0%, rgba(255,30,45,.32), transparent 22rem); opacity:.9; }
.walkons-hero > * { position:relative; }
.walkons-kicker { color: var(--walkons-sky); font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.walkons-hero h1 { max-width: 12ch; text-transform: uppercase; letter-spacing:-.045em; }
.walkons-hero p { color: rgba(255,255,255,.8); line-height:1.55; font-size:1.05rem; }
.walkons-logo-card { background:white; color:var(--walkons-navy); border-radius:1.4rem; padding:1rem; border:5px solid rgba(86,193,255,.35); box-shadow: 0 28px 80px rgba(0,0,0,.24); }
.walkons-logo-card img { max-width: 190px; display:block; margin:0 auto 1rem; }
.walkons-button { background: var(--walkons-red); color:white; text-transform:uppercase; letter-spacing:.04em; }
.walkons-button.secondary { background:white; color:var(--walkons-navy); border-color:white; }
.demo-shell { display:grid; grid-template-columns: 380px minmax(0, 1fr); gap:1rem; padding:1rem; max-width:1500px; margin:0 auto; }
.control-panel, .pos-panel, .event-panel { background:white; border:1px solid #e6e8f0; border-radius:1.2rem; box-shadow: 0 16px 48px rgba(3,4,94,.08); }
.control-panel { padding:1.1rem; height:max-content; position:sticky; top:5rem; }
.control-panel h2, .pos-panel h2, .event-panel h2 { color:var(--walkons-navy); font-size:1.45rem; letter-spacing:-.02em; text-transform:uppercase; }
.steps { display:grid; gap:.7rem; margin:1rem 0; }
.step { display:flex; gap:.8rem; align-items:flex-start; color:#374151; }
.step b { flex:0 0 1.8rem; height:1.8rem; display:grid; place-items:center; border-radius:999px; background:var(--walkons-navy); color:white; }
.disclaimer { padding:.85rem; border-radius:.8rem; background:#fff4f5; border:1px solid #ffd4d8; color:#7f1d1d; font-size:.9rem; line-height:1.45; }
.pos-panel { overflow:hidden; }
.pos-top { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1.2rem; background:#101421; color:white; }
.pos-top h2 { color:white; margin:0; }
.status-pill { padding:.45rem .7rem; border-radius:999px; background:rgba(86,193,255,.18); color:#c8ecff; font-weight:800; font-size:.85rem; }
.check-meta { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:.75rem; padding:1rem 1.2rem; background:#f8fafc; border-bottom:1px solid #e6e8f0; }
.check-meta div { display:grid; gap:.25rem; color:#6b7280; font-size:.78rem; text-transform:uppercase; font-weight:800; }
.check-meta strong { color:#111827; font-size:.98rem; text-transform:none; }
.order-table { width:100%; border-collapse:collapse; }
.order-table th, .order-table td { padding:.9rem 1.2rem; text-align:left; border-bottom:1px solid #eef0f5; vertical-align:top; }
.order-table th { color:#6b7280; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; background:#fbfcff; }
.order-table .money { text-align:right; font-variant-numeric: tabular-nums; }
.empty-row { color:#7c8494; }
.total-bar { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.2rem; background:var(--walkons-navy); color:white; font-weight:900; font-size:1.3rem; }
.event-panel { margin-top:1rem; padding:1rem 1.2rem; }
.event-list { display:grid; gap:.55rem; max-height: 300px; overflow:auto; }
.event-row { display:grid; grid-template-columns: 90px 1fr; gap:.7rem; padding:.65rem; border-radius:.8rem; background:#f8fafc; color:#374151; font-size:.9rem; }
.event-row b { color:var(--walkons-navy); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }
.mobile-note { display:none; }

/* Compact embedded-agent demo */
.compact-demo-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(86,193,255,.16), transparent 24rem),
    radial-gradient(circle at 92% 6%, rgba(255,30,45,.09), transparent 22rem),
    #f4f6fb;
}
.walkons-workspace {
  display: grid;
  gap: .8rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: .85rem clamp(.8rem, 2vw, 1.4rem) 1rem;
}
.walkons-demo-header,
.demo-command-bar,
.agent-panel,
.compact-event-panel {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1.2rem;
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
  backdrop-filter: blur(16px);
}
.walkons-demo-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  min-height: 64px;
  padding:.65rem .8rem;
}
.walkons-wordmark {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 auto;
  color:#111827;
}
.walkons-mark {
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:.85rem;
  background:linear-gradient(135deg, #0ea5e9, #14b8a6);
  color:white;
  font-weight:950;
  box-shadow:0 10px 22px rgba(14,165,233,.22);
}
.walkons-wordmark strong,
.walkons-wordmark em { display:block; line-height:1; }
.walkons-wordmark strong { font-size:1.08rem; letter-spacing:-.035em; }
.walkons-wordmark em { margin-top:.2rem; color:#64748b; font-style:normal; font-size:.74rem; }
.walkons-header-actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.demo-pill { display:inline-flex; align-items:center; min-height:34px; padding:0 .75rem; border-radius:999px; background:#eef6ff; color:#075985; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.compact-reset { min-height:34px; padding:.45rem .8rem; border-color:#dbe3ef; box-shadow:none; }
.demo-command-bar {
  display:grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
  gap:1rem;
  align-items:end;
  padding: .9rem 1rem;
}
.demo-command-bar .walkons-kicker { margin:0 0 .25rem; color:#0f766e; font-size:.68rem; }
.demo-command-bar h1 {
  max-width:none;
  color:#0f172a;
  font-size:clamp(1.45rem, 2.4vw, 2.45rem);
  line-height:1.02;
  letter-spacing:-.055em;
  text-transform:none;
}
.demo-command-bar p:last-child { margin:0; color:#475569; line-height:1.45; font-size:.95rem; }
.live-demo-grid { display:grid; grid-template-columns: minmax(360px, .74fr) minmax(560px, 1.26fr); gap:.8rem; align-items:stretch; }
.agent-panel { display:flex; flex-direction:column; min-height: 485px; overflow:hidden; }
.panel-heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.9rem 1rem .75rem; border-bottom:1px solid #eef2f7; }
.panel-heading .walkons-kicker { margin:0 0 .2rem; color:#0f766e; font-size:.66rem; }
.panel-heading h2 { color:#0f172a; font-size:1.05rem; letter-spacing:-.025em; text-transform:none; }
.agent-fallback { color:#0f766e; font-size:.78rem; font-weight:900; white-space:nowrap; }
.agent-widget-shell { flex:1; display:grid; place-items:center; min-height: 360px; padding: .8rem; background:linear-gradient(180deg, #f8fafc, #eef6ff); }
elevenlabs-convai { width:100%; min-height: 340px; display:block; }
.agent-script { margin:0; padding:.75rem 1rem .9rem; color:#64748b; font-size:.86rem; line-height:1.4; border-top:1px solid #eef2f7; }
.live-demo-grid .pos-panel { min-height: 485px; box-shadow:0 16px 44px rgba(15,23,42,.07); border-color:rgba(15,23,42,.08); border-radius:1.2rem; }
.live-demo-grid .pos-top { padding:.75rem .95rem; background:#0f172a; }
.live-demo-grid .pos-top h2 { font-size:1.05rem; letter-spacing:-.025em; text-transform:none; }
.live-demo-grid .check-meta { padding:.7rem .9rem; gap:.55rem; }
.live-demo-grid .check-meta div { font-size:.66rem; }
.live-demo-grid .check-meta strong { font-size:.84rem; }
.compact-order-table th,
.compact-order-table td { padding:.66rem .85rem; }
.compact-order-table th { font-size:.66rem; }
.compact-order-table td { font-size:.9rem; }
.live-demo-grid .total-bar { padding:.78rem .95rem; font-size:1.05rem; }
.compact-event-panel { margin-top:0; padding:.75rem .9rem; }
.compact-feed-heading { padding:0 0 .55rem; border-bottom:0; }
.compact-feed-heading h2 { color:#0f172a; font-size:.95rem; text-transform:none; letter-spacing:-.02em; }
.compact-feed-heading p { margin:0; color:#64748b; font-size:.78rem; }
.compact-event-panel .event-list { max-height: 118px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.45rem; }
.compact-event-panel .event-row { grid-template-columns: 74px 1fr; padding:.48rem .55rem; font-size:.78rem; background:#f8fafc; }
.compact-event-panel .event-row b { font-size:.62rem; }
@media (min-width: 1100px) and (max-height: 820px) {
  .walkons-workspace { gap:.6rem; padding-top:.6rem; }
  .walkons-demo-header { min-height:54px; padding:.45rem .65rem; }
  .demo-command-bar { padding:.65rem .85rem; }
  .demo-command-bar h1 { font-size:1.7rem; }
  .demo-command-bar p:last-child { font-size:.86rem; }
  .agent-panel,
  .live-demo-grid .pos-panel { min-height: 430px; }
  .agent-widget-shell { min-height: 310px; }
  elevenlabs-convai { min-height: 300px; }
  .compact-event-panel .event-list { max-height: 84px; }
}
@media (max-width: 980px) {
  .site-header { position:static; align-items:flex-start; }
  nav { display:none; }
  .hero, .walkons-hero, .split-section, .demo-shell, .demo-command-bar, .live-demo-grid { grid-template-columns: 1fr; }
  .hero { min-height:auto; }
  h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .service-grid { grid-template-columns: 1fr; }
  .work-list div { grid-template-columns: 1fr; }
  .demo-callout, footer { flex-direction:column; align-items:flex-start; }
  .control-panel { position:static; }
  .check-meta { grid-template-columns: 1fr 1fr; }
  .mobile-note { display:block; }
  .walkons-wordmark { margin:0; }
  .walkons-header-actions .demo-pill { display:none; }
  .agent-panel, .live-demo-grid .pos-panel { min-height: auto; }
  .compact-event-panel .event-list { grid-template-columns:1fr; max-height: 220px; }
}
@media (max-width: 560px) {
  .walkons-hero, .section, .demo-shell { padding-left:.85rem; padding-right:.85rem; }
  .walkons-workspace { padding-left:.65rem; padding-right:.65rem; }
  .walkons-demo-header { align-items:flex-start; }
  .walkons-header-actions { flex-direction:column; align-items:flex-end; }
  .pos-top, .check-meta, .order-table th, .order-table td, .total-bar { padding-left:.75rem; padding-right:.75rem; }
  .order-table th:nth-child(3), .order-table td:nth-child(3) { display:none; }
  .event-row { grid-template-columns: 1fr; }
}

/* Walk-On's ultra-simple dark focus interface */
.walkons-focus-body {
  min-height: 100vh;
  margin: 0;
  color: #f7f8f8;
  color-scheme: dark;
  background:
    radial-gradient(circle at 18% -14%, rgba(113,112,255,.24), transparent 32rem),
    radial-gradient(circle at 86% 0%, rgba(255,30,45,.12), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg) 100%);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv01", "ss03";
}
.walkons-focus-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px;
}
.focus-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: 0 24px 80px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.focus-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.focus-brand img {
  display: block;
  width: 156px;
  max-height: 50px;
  object-fit: contain;
  padding: 6px 10px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 36px rgba(113,112,255,.22);
}
.focus-client-logo {
  display: block;
  width: 156px;
  max-height: 50px;
  object-fit: contain;
  padding: 6px 10px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 36px rgba(113,112,255,.22);
}
.focus-brand span {
  color: #d0d6e0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
}
.focus-brand span::after {
  content: " · Savant demo system";
  color: #9ea7ff;
  font-weight: 760;
}
.focus-home-brand {
  gap: 9px;
  padding-left: 9px;
}
.focus-home-brand img {
  width: 18px;
  height: 18px;
  max-height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}
.focus-home-brand span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.focus-home-brand span::after { content: none; }
.focus-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.focus-status,
.focus-home,
.focus-reset,
.focus-panel-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #d0d6e0;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.focus-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: #27a644;
  box-shadow: 0 0 16px rgba(39,166,68,.65);
}
.focus-reset {
  cursor: pointer;
  color: #f7f8f8;
}
.focus-home { color: #f7f8f8; }
.focus-reset:hover,
.focus-home:hover,
.focus-panel-head a:hover { background: rgba(255,255,255,.075); }
.focus-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(560px, 1.08fr);
  gap: 14px;
}
.focus-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px rgba(0,0,0,.32);
}
.focus-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.focus-panel-head span {
  color: #f7f8f8;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.focus-panel-head small {
  color: #8a8f98;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.voice-widget-frame {
  flex: 1;
  min-height: 0;
  display: grid;
  align-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 26%, rgba(113,112,255,.12), transparent 16rem),
    rgba(0,0,0,.12);
}
.voice-widget-frame elevenlabs-convai {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 430px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 18px;
}
.order-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.06);
}
.order-meta-strip div {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  background: rgba(0,0,0,.18);
}
.order-meta-strip span {
  color: #62666d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.order-meta-strip strong {
  color: #d0d6e0;
  font-size: 13px;
  font-weight: 650;
}
.focus-order-table {
  flex: 1;
  min-height: 0;
  color: #f7f8f8;
  background: rgba(0,0,0,.10);
}
.focus-order-table th,
.focus-order-table td {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 15px 14px;
}
.focus-order-table th {
  background: rgba(255,255,255,.025);
  color: #62666d;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.focus-order-table td {
  color: #d0d6e0;
  font-size: 14px;
}
.focus-order-table td strong { color: #f7f8f8; font-weight: 720; }
.focus-order-table small { color: #8a8f98; }
.focus-order-table .empty-row td {
  height: 320px;
  color: #62666d;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(113,112,255,.06), transparent 18rem),
    rgba(0,0,0,.08);
  font-size: 15px;
}
.focus-total-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(113,112,255,.30), rgba(5,6,8,.96));
}
.focus-total-bar span {
  color: #8a8f98;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.focus-total-bar strong {
  color: #ffffff;
  font-size: clamp(2rem, 4.5vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}
.focus-footnote {
  color: #62666d;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
}
@media (min-width: 1100px) and (max-height: 820px) {
  .walkons-focus-shell { gap: 10px; padding: 12px; }
  .focus-topbar { min-height: 58px; }
  .focus-client-logo { width: 138px; max-height: 44px; }
  .focus-panel-head { min-height: 48px; padding: 9px 12px; }
  .voice-widget-frame { padding: 16px; }
  .voice-widget-frame elevenlabs-convai { min-height: 350px !important; }
  .focus-order-table .empty-row td { height: 245px; }
  .focus-total-bar { padding: 14px 18px; }
}
@media (max-width: 980px) {
  .walkons-focus-shell { min-height: auto; }
  .focus-stage { grid-template-columns: 1fr; }
  .voice-widget-frame elevenlabs-convai { min-height: 330px !important; }
}
@media (max-width: 620px) {
  .walkons-focus-shell { padding: 10px; }
  .focus-topbar { align-items: flex-start; flex-direction: column; }
  .focus-brand { width: 100%; justify-content: space-between; }
  .focus-client-logo { width: 132px; }
  .focus-actions { width: 100%; justify-content: space-between; }
  .focus-status,
  .focus-home,
  .focus-reset { min-height: 30px; padding: 0 9px; font-size: 10px; }
  .order-meta-strip { grid-template-columns: 1fr; }
  .focus-order-table th:nth-child(3),
  .focus-order-table td:nth-child(3) { display: none; }
}

/* Walk-On's brand pass: restaurant/sports-bar energy, distinct from Savant shell. */
.walkons-focus-body {
  --walkons-navy-deep: #071637;
  --walkons-navy: #0b2c5f;
  --walkons-blue: #115b9f;
  --walkons-red: #d71920;
  --walkons-gold: #f6b333;
  --walkons-cream: #fff7e8;
  --walkons-ink: #101522;
  color: var(--walkons-cream);
  background:
    linear-gradient(115deg, rgba(215,25,32,.20) 0 10%, transparent 10% 100%),
    radial-gradient(circle at 16% 0%, rgba(246,179,51,.20), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(17,91,159,.40), transparent 30rem),
    linear-gradient(180deg, #071637 0%, #0b244a 48%, #061028 100%);
}
.walkons-focus-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.045) 42px 43px),
    linear-gradient(135deg, transparent 0 47%, rgba(246,179,51,.32) 47% 48%, transparent 48% 100%);
}
.walkons-focus-shell { position: relative; max-width: 1540px; gap: 16px; }
.focus-topbar {
  border: 1px solid rgba(255,247,232,.22);
  background:
    linear-gradient(90deg, rgba(215,25,32,.98) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255,247,232,.97), rgba(255,244,221,.91));
  box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 -4px 0 rgba(215,25,32,.95);
}
.focus-home,
.focus-reset,
.focus-status,
.focus-panel-head a {
  border-color: rgba(7,22,55,.14);
  background: rgba(7,22,55,.07);
  color: var(--walkons-navy-deep);
}
.focus-home:hover,
.focus-reset:hover,
.focus-panel-head a:hover { background: rgba(215,25,32,.11); }
.focus-status {
  color: #0d3f27;
  background: rgba(39,166,68,.10);
  border-color: rgba(39,166,68,.24);
}
.focus-client-logo {
  width: 172px;
  background: #ffffff;
  border: 1px solid rgba(7,22,55,.10);
  box-shadow: none;
}
.focus-stage { grid-template-columns: minmax(420px, .9fr) minmax(590px, 1.1fr); }
.focus-panel {
  border: 1px solid rgba(255,247,232,.20);
  background: linear-gradient(180deg, rgba(255,247,232,.96), rgba(255,244,221,.91));
  color: var(--walkons-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.72);
}
.focus-panel-head {
  min-height: 62px;
  border-bottom: 1px solid rgba(7,22,55,.10);
  background: linear-gradient(90deg, var(--walkons-navy-deep), var(--walkons-navy));
}
.focus-panel-head span {
  color: #fff7e8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.focus-panel-head small { color: rgba(255,247,232,.66); }
.voice-widget-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(circle at center, rgba(246,179,51,.20), transparent 16rem),
    linear-gradient(135deg, rgba(215,25,32,.10), rgba(11,44,95,.12)),
    #fff8ea;
}
.voice-widget-frame elevenlabs-convai {
  flex: 0 1 430px;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: min(100%, 430px) !important;
  min-height: 390px !important;
  margin: auto !important;
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(7,22,55,.18);
}
.order-meta-strip {
  border-bottom: 1px solid rgba(7,22,55,.10);
  background: rgba(7,22,55,.12);
}
.order-meta-strip div { background: rgba(255,255,255,.58); }
.order-meta-strip span { color: rgba(7,22,55,.52); }
.order-meta-strip strong { color: var(--walkons-navy-deep); }
.focus-order-table {
  background: #fffaf0;
  color: var(--walkons-ink);
}
.focus-order-table th {
  background: rgba(7,22,55,.055);
  color: rgba(7,22,55,.52);
}
.focus-order-table td {
  border-bottom: 1px solid rgba(7,22,55,.09);
  color: #243047;
}
.focus-order-table td strong { color: #071637; }
.focus-order-table .empty-row td {
  color: rgba(7,22,55,.50);
  background:
    radial-gradient(circle at center, rgba(246,179,51,.12), transparent 18rem),
    linear-gradient(135deg, rgba(215,25,32,.045), rgba(17,91,159,.055));
}
.focus-total-bar {
  border-top: 4px solid var(--walkons-red);
  background: linear-gradient(135deg, var(--walkons-navy-deep), var(--walkons-blue));
}
.focus-total-bar span { color: rgba(255,247,232,.68); }
.focus-total-bar strong { color: #fff7e8; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.focus-footnote { color: rgba(255,247,232,.58); }
@media (min-width: 1100px) and (max-height: 820px) {
  .voice-widget-frame elevenlabs-convai { min-height: 350px !important; height: 350px !important; }
}
@media (max-width: 980px) {
  .focus-stage { grid-template-columns: 1fr; }
  .voice-widget-frame elevenlabs-convai { min-height: 340px !important; height: 360px !important; }
}