/* ==========================================================================
   BytesFusion — Coworking page
   Page-specific layer. Loaded AFTER style.css; tokens come from there.
   ========================================================================== */

/* ---------- Page hero additions ---------- */
.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-top:28px;
}
.hero-mock{
  position:relative;
  max-width:960px;
  margin:56px auto 0;
}

/* ---------- Availability slot grid (bookings mock) ---------- */
.slot-grid{
  display:grid;
  grid-template-columns:74px repeat(6,1fr);
  gap:7px;
  align-items:center;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
}
.slot-grid .sh{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.08em;
  color:var(--muted-2);
  text-align:center;
}
.slot-grid .sn{
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
}
.slot{
  height:28px;
  border-radius:7px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}
.slot--booked{
  background:var(--brand-soft);
  border-color:var(--brand-line);
}
.slot--hold{
  background:rgba(45,226,197,.14);
  border-color:rgba(45,226,197,.34);
}
.slot-legend{
  display:flex; flex-wrap:wrap; gap:18px;
  font-size:.72rem; color:var(--muted-2);
}
.slot-legend i{
  display:inline-block; width:12px; height:12px;
  border-radius:4px; margin-right:6px; vertical-align:-2px;
  background:rgba(255,255,255,.045); border:1px solid var(--line);
}
.slot-legend i.b{ background:var(--brand-soft); border-color:var(--brand-line); }
.slot-legend i.h{ background:rgba(45,226,197,.14); border-color:rgba(45,226,197,.34); }

/* ---------- Meter used inside mock rows ---------- */
.meter{ display:block; }

/* ---------- Integrations grouped by category ---------- */
.int-group + .int-group{ margin-top:32px; }
.int-group .divider-label{ margin-bottom:16px; }
.int-grid--cat{ grid-template-columns:repeat(4,1fr); }

/* ---------- App screenshot frames (light product UI) ----------
   Faithful light-theme recreations of the BytesFusion HRM & Workspace
   suite: owner, employee and member logins.                       */
.appshot{
  --app-bg:#f4f4f5; --app-side:#161616; --app-card:#ffffff; --app-line:#e7e7ea;
  --app-ink:#18181b; --app-mut:#78787f; --app-accent:#f5a623; --app-brand:#c2410c;
  display:grid; grid-template-columns:186px 1fr; min-width:0;
  border-radius:16px; overflow:hidden; background:var(--app-bg); color:var(--app-ink);
  border:1px solid var(--line-strong); box-shadow:var(--shadow);
  font-size:11.5px; line-height:1.45;
}
.appshot--wide{ grid-template-columns:170px 1fr; }

/* sidebar */
.appshot-side{
  background:var(--app-side); color:#a1a1aa; padding:14px 9px 10px;
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.appshot-brand{
  display:flex; align-items:center; gap:8px; padding:0 8px 12px;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:-.02em;
}
.appshot-brand i{ width:19px; height:19px; border-radius:6px; flex:none; background:linear-gradient(135deg,var(--app-accent),#f97316); }
.appshot-side .lbl{
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#52525b;
  padding:11px 9px 5px; font-weight:600;
}
.appshot-side a{
  display:block; padding:6px 9px; border-radius:7px; color:#a1a1aa;
  font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appshot-side a.on{ background:var(--app-accent); color:#18181b; font-weight:600; }
.appshot-user{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  padding:11px 8px 2px; border-top:1px solid #27272a; color:#e4e4e7; font-size:11px;
}
.appshot-user .av{
  width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#ffedd5; color:#c2410c; font-size:8.5px; font-weight:700;
}
.appshot-user b{ display:block; font-size:11px; color:#fff; font-weight:600; line-height:1.2; }
.appshot-user small{ color:#71717a; font-size:9.5px; }

/* main pane */
.appshot-main{ padding:13px 15px 16px; min-width:0; display:grid; gap:11px; align-content:start; }
.appshot-top{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:10px; color:var(--app-mut); font-family:var(--font-mono); letter-spacing:.02em;
  border-bottom:1px solid var(--app-line); padding-bottom:9px;
}
.appshot-top .bell{ color:var(--app-brand); font-weight:700; font-family:var(--font-body); }
.appshot-eyebrow{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--app-brand); font-weight:700; }
.appshot-h{ font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.02em; margin:0; }
.appshot-h span{ color:var(--app-brand); }
.appshot-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; }

/* KPI cards */
.appshot-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.appshot-kpis--4{ grid-template-columns:repeat(4,1fr); }
.appshot-kpis--3{ grid-template-columns:repeat(3,1fr); }
.appshot-kpi{ background:var(--app-card); border:1px solid var(--app-line); border-radius:8px; padding:9px 10px; min-width:0; }
.appshot-kpi small{
  display:block; font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--app-mut); margin-bottom:5px; font-weight:600;
  line-height:1.35; min-height:2.1em;
}
.appshot-kpi b{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.02em; display:block; }
.appshot-kpi b.green{ color:#16a34a; } .appshot-kpi b.amber{ color:var(--app-brand); } .appshot-kpi b.red{ color:#dc2626; }
.appshot-kpi span{ font-size:9px; color:var(--app-mut); display:block; margin-top:2px; }

/* cards & panels */
.appshot-card{ background:var(--app-card); border:1px solid var(--app-line); border-radius:9px; padding:11px 12px; min-width:0; }
.appshot-card > h6{
  margin:0 0 8px; font-size:11.5px; font-weight:600; font-family:var(--font-body);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.appshot-card > h6 a{ color:var(--app-brand); font-size:10px; font-weight:600; }
.appshot-empty{ font-size:10.5px; color:var(--app-mut); padding:6px 0; }
.appshot-grid2{ display:grid; grid-template-columns:1.15fr .85fr; gap:8px; }
.appshot-note{ font-size:10px; color:var(--app-mut); }

/* announcement / list rows */
.appshot-row{ border-top:1px solid #f1f1f2; padding:8px 0; display:flex; gap:10px; align-items:flex-start; }
.appshot-row:first-of-type{ border-top:0; }
.appshot-row .rmain{ flex:1; min-width:0; }
.appshot-row b{ display:block; font-size:11px; font-weight:600; margin-bottom:2px; }
.appshot-row p{ margin:0; font-size:10px; color:var(--app-mut); }
.appshot-row small{ font-size:9px; color:#a1a1aa; display:block; margin-top:3px; }

/* tables */
.appshot-tbl-wrap{ background:var(--app-card); border:1px solid var(--app-line); border-radius:9px; overflow-x:auto; min-width:0; }
.appshot-tbl{ width:100%; border-collapse:collapse; font-size:10.5px; min-width:330px; }
.appshot-tbl th{
  text-align:left; font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--app-mut); font-weight:600; padding:8px 11px; border-bottom:1px solid var(--app-line);
  background:#fafafa; white-space:nowrap;
}
.appshot-tbl td{ padding:7px 11px; border-bottom:1px solid #f3f3f4; white-space:nowrap; }
.appshot-tbl tr:last-child td{ border-bottom:0; }
.appshot-tbl td:first-child{ font-weight:500; }
.appshot-tbl .who{ display:flex; align-items:center; gap:8px; }
.appshot-tbl .who .av{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#ffedd5; color:#c2410c; font-size:8px; font-weight:700;
}
.appshot-tbl .who b{ display:block; font-size:10.5px; font-weight:600; line-height:1.2; }
.appshot-tbl .who small{ color:var(--app-mut); font-size:8.5px; font-family:var(--font-mono); }
.appshot-tbl .act{ color:var(--app-brand); font-weight:600; }
.appshot-tbl .muted-cell{ color:var(--app-mut); }
.appshot-tbl .seats-low{ color:var(--app-brand); font-weight:600; }

/* pills & buttons inside app frames */
.apppill{
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.apppill--ok{ background:#dcfce7; color:#15803d; }
.apppill--warn{ background:#ffedd5; color:#c2410c; }
.apppill--mute{ background:#f4f4f5; color:#52525b; border:1px solid var(--app-line); }
.apppill--red{ background:#fee2e2; color:#b91c1c; }
.apppill--blue{ background:#dbeafe; color:#1d4ed8; }
.appbtn{
  display:inline-block; background:var(--app-accent); color:#18181b;
  font-size:9.5px; font-weight:700; padding:5px 11px; border-radius:7px; white-space:nowrap;
}
.appbtn--dark{ background:#27272a; color:#fff; }
.appbtn--sm{ font-size:9px; padding:4px 9px; }

/* salary breakdown rows */
.appshot-kv{ display:grid; gap:0; }
.appshot-kv .kv{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:8px 0; border-top:1px solid #f1f1f2; font-size:11px;
}
.appshot-kv .kv:first-child{ border-top:0; }
.appshot-kv .kv b{ font-weight:500; }
.appshot-kv .kv strong{ font-family:var(--font-display); font-weight:600; }
.appshot-kv .kv.total strong{ color:var(--app-brand); font-size:13px; }
.appshot-kv .kv.total b{ font-weight:700; }

/* check-in block */
.appshot-checkin{ text-align:center; padding:6px 0 2px; }
.appshot-checkin .date{ font-family:var(--font-mono); font-size:10.5px; color:var(--app-ink); margin-bottom:9px; }
.appshot-checkin .times{ display:flex; justify-content:center; gap:34px; margin-bottom:10px; }
.appshot-checkin .times div{ font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--app-mut); }
.appshot-checkin .times b{ display:block; font-size:14px; color:var(--app-ink); margin-top:3px; font-family:var(--font-display); }
.appshot-checkin .big{ display:block; width:100%; text-align:center; background:var(--app-accent); color:#18181b; font-weight:700; font-size:11.5px; padding:9px; border-radius:8px; margin-bottom:7px; }
.appshot-checkin .hint{ font-size:9.5px; color:var(--app-mut); }
.appshot-checkin .hint a{ color:var(--app-brand); font-weight:600; }

/* room calendar */
.appcal{ background:var(--app-card); border:1px solid var(--app-line); border-radius:9px; overflow:hidden; }
.appcal-grid{ display:grid; grid-template-columns:52px repeat(7,1fr); }
.appcal-grid > *{ border-top:1px solid #f3f3f4; min-width:0; }
.appcal-grid .hd{
  border-top:0; background:#fafafa; text-align:center; padding:6px 2px;
  font-size:8.5px; color:var(--app-mut); letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.appcal-grid .rh{ padding:5px 7px; font-size:8.5px; color:var(--app-mut); font-family:var(--font-mono); background:#fff; }
.appcal-grid .cell{ background:#fff; min-height:22px; position:relative; }
.appcal-grid .bk{
  position:absolute; inset:2px; border-radius:4px; display:grid; place-items:center;
  font-size:8px; font-weight:700; letter-spacing:.04em;
}
.appcal-grid .bk--other{ background:#fee2e2; color:#b91c1c; }
.appcal-grid .bk--mine{ background:#ffedd5; color:#c2410c; }
.appcal-legend{ display:flex; gap:14px; align-items:center; font-size:9px; color:var(--app-mut); padding:0 2px; }
.appcal-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; border:1px solid var(--app-line); background:#fff; }
.appcal-legend i.b{ background:#fee2e2; border-color:#fecaca; }
.appcal-legend i.m{ background:#ffedd5; border-color:#fed7aa; }
.appshot-roomcard{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.appshot-roomcard b{ font-size:12px; font-weight:600; display:block; }
.appshot-roomcard small{ color:var(--app-mut); font-size:9.5px; }

/* feature caption next to a shot */
.shot-cap{ display:grid; gap:16px; }
.shot-cap .badge{ justify-self:start; }
.shot-cap h3{ margin-bottom:2px; }
.shot-cap p{ color:var(--muted); font-size:.95rem; margin:0; }
.shot-cap .check-list{ margin-top:4px; }

/* responsive */
@media (max-width:1080px){
  .appshot-kpis{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:880px){
  .appshot{ grid-template-columns:1fr; font-size:11px; }
  .appshot-side{ display:none; }
  .appshot-kpis,.appshot-kpis--4,.appshot-kpis--3{ grid-template-columns:repeat(2,1fr); }
  .appshot-grid2{ grid-template-columns:1fr; }
  .appcal-grid{ grid-template-columns:44px repeat(7,1fr); }
}
@media (max-width:560px){
  .appshot-kpis,.appshot-kpis--4,.appshot-kpis--3{ grid-template-columns:1fr 1fr; }
  .appshot-tbl th:nth-child(n+5), .appshot-tbl td:nth-child(n+5){ display:none; }
  .appshot-main{ padding:11px; }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .int-grid--cat{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:880px){
  .hero-mock{ margin-top:44px; }
  .int-grid--cat{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .hero-mock{ margin-top:38px; }
  .int-grid--cat{ grid-template-columns:repeat(2,1fr); }
  .slot-grid{ grid-template-columns:58px repeat(6,1fr); gap:5px; padding:11px; }
  .slot{ height:22px; }
}
@media (max-width:400px){
  .slot-grid{ grid-template-columns:50px repeat(6,1fr); gap:4px; padding:9px; }
}

/* ==========================================================================
   PRODUCT GUIDE COMPONENTS (built from the platform user guide)
   ========================================================================== */

/* ---------- challenge -> solution rows ---------- */
.prob-list{ border-top:1px solid var(--line); }
.prob{
  display:grid; grid-template-columns:1fr 1.25fr; gap:28px;
  padding:20px 0; border-bottom:1px solid var(--line); align-items:start;
}
.prob .p-chal{ display:flex; gap:13px; align-items:flex-start; }
.prob .p-chal i{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:rgba(255,159,67,.1); border:1px solid rgba(255,159,67,.3); color:#ff9f43;
  font-style:normal; font-size:.82rem; font-weight:700;
}
.prob .p-chal b{ font-size:.98rem; font-weight:600; }
.prob .p-fix{ display:flex; gap:13px; align-items:flex-start; color:var(--muted); font-size:.95rem; }
.prob .p-fix i{
  width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand);
  font-style:normal; font-weight:700;
}
.prob .p-fix b{ color:var(--text); font-weight:600; }

/* ---------- permission matrix ---------- */
.matrix{ min-width:640px; }
.matrix thead th:not(:first-child){ font-family:var(--font-display); font-size:.92rem; text-transform:none; letter-spacing:0; }
.matrix td.f{ color:var(--brand-2); font-weight:700; }
.matrix td.l{ color:#ff9f43; font-weight:600; }
.matrix td.n{ color:var(--muted-2); }
.matrix-note{ margin-top:16px; font-size:.85rem; color:var(--muted-2); }
.matrix-note b{ color:var(--muted); }

/* ---------- role cards ---------- */
.role-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.role{ padding:24px; border-radius:18px; background:var(--surface); border:1px solid var(--line); display:grid; gap:14px; align-content:start; transition:.3s; min-width:0; }
.role:hover{ border-color:var(--brand-line); transform:translateY(-4px); }
.role .r-top{ display:flex; align-items:center; gap:12px; }
.role .r-ico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand); flex:none; }
.role .r-ico svg{ width:20px; height:20px; }
.role h4{ margin:0; font-family:var(--font-display); font-size:1.06rem; }
.role h4 small{ display:block; font-family:var(--font-body); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:600; margin-bottom:3px; }
.role p{ margin:0; color:var(--muted); font-size:.92rem; }
.role .r-menu{ display:flex; flex-wrap:wrap; gap:6px; }
.role .r-menu span{ font-size:.72rem; padding:4px 9px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); }

/* ---------- menu chips (product tour) ---------- */
.menu-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.menu-chips span{
  font-size:.75rem; padding:5px 10px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted);
}
.menu-chips span.on{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand); font-weight:600; }

/* ---------- "what you can do" module list ---------- */
.modlist{ list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.modlist li{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--muted); align-items:start; }
.modlist li b{ color:var(--text); font-weight:600; }
@media (max-width:640px){ .modlist li{ grid-template-columns:1fr; gap:4px; } }

/* ---------- typical day ---------- */
.daylist{ list-style:none; counter-reset:day; padding:0; margin:0; display:grid; gap:11px; }
.daylist li{ counter-increment:day; display:flex; gap:12px; color:var(--muted); font-size:.93rem; align-items:flex-start; }
.daylist li::before{
  content:counter(day); flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand);
  font-size:.74rem; font-weight:700; font-family:var(--font-mono); margin-top:1px;
}

/* ---------- seating floor plan mock ---------- */
.floorplan{ display:grid; gap:12px; }
.fp-zone{ border:1px dashed #d4d4d8; border-radius:10px; padding:9px 10px 11px; background:#fafafa; }
.fp-zone .zl{ font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:#a1a1aa; font-weight:700; margin-bottom:8px; display:block; }
.fp-seats{ display:flex; flex-wrap:wrap; gap:7px; }
.fp-seat{
  width:38px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--app-line); color:#a1a1aa;
  font-size:8.5px; font-weight:700; font-family:var(--font-mono);
}
.fp-seat.taken{ background:#ffedd5; border-color:#fed7aa; color:#c2410c; }
.fp-seat.hot{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.fp-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:9.5px; color:var(--app-mut); }
.fp-legend i{ display:inline-block; width:11px; height:11px; border-radius:4px; border:1px solid var(--app-line); background:#fff; vertical-align:-1px; margin-right:5px; }
.fp-legend i.t{ background:#ffedd5; border-color:#fed7aa; }
.fp-legend i.h{ background:#fee2e2; border-color:#fecaca; }

/* ---------- geofence radius mock ---------- */
.georing{ position:relative; height:210px; border-radius:12px; background:#f4f4f5; overflow:hidden; border:1px solid var(--app-line); }
.georing .grid{ position:absolute; inset:0; background-image:linear-gradient(#e4e4e7 1px,transparent 1px),linear-gradient(90deg,#e4e4e7 1px,transparent 1px); background-size:26px 26px; opacity:.7; }
.georing .road{ position:absolute; background:#e9e9ec; }
.georing .r1{ left:0; right:0; top:58%; height:26px; transform:rotate(-6deg); }
.georing .r2{ top:0; bottom:0; left:30%; width:22px; }
.georing .radius{
  position:absolute; left:50%; top:46%; width:150px; height:150px; margin:-75px 0 0 -75px;
  border-radius:50%; background:rgba(245,166,35,.12); border:2px dashed rgba(245,166,35,.65);
}
.georing .pin{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:#f5a623; color:#18181b;
  display:grid; place-items:center; font-weight:800; font-size:9px; font-family:var(--font-display);
  box-shadow:0 0 0 6px rgba(245,166,35,.2);
}
.georing .who{
  position:absolute; right:12px; bottom:12px; background:#fff; border:1px solid var(--app-line);
  border-radius:8px; padding:7px 10px; font-size:9.5px; color:var(--app-mut); max-width:60%;
}
.georing .who b{ display:block; font-size:11px; color:var(--app-ink); }
.georing .who.ok{ border-color:#bbf7d0; } .georing .who.ok b{ color:#15803d; }
.georing .who.no{ border-color:#fecaca; } .georing .who.no b{ color:#b91c1c; }

/* ---------- excel sheets list ---------- */
.sheets{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sheet{ display:flex; gap:12px; padding:14px 15px; border-radius:13px; background:var(--surface); border:1px solid var(--line); min-width:0; }
.sheet .si{ width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center; background:rgba(45,226,197,.1); border:1px solid rgba(45,226,197,.3); color:#2de2c5; font-size:.72rem; font-weight:800; font-family:var(--font-mono); }
.sheet b{ display:block; font-size:.92rem; margin-bottom:3px; }
.sheet small{ display:block; color:var(--muted); font-size:.83rem; line-height:1.5; }

/* ---------- spec strip (doc facts) ---------- */
.spec-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.spec{ padding:18px; border-radius:15px; background:var(--surface); border:1px solid var(--line); text-align:center; min-width:0; }
.spec b{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-.03em; color:var(--brand); }
.spec small{ color:var(--muted); font-size:.83rem; line-height:1.45; display:block; margin-top:5px; }

@media (max-width:1080px){
  .role-grid{ grid-template-columns:repeat(2,1fr); }
  .spec-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .prob{ grid-template-columns:1fr; gap:14px; }
  .sheets{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .role-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   LAYOUT FIXES — real product shots get the space their content needs
   ========================================================================== */

/* product tour: give the screenshot the wider column so tables never slice */
#product-tour .split{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(28px,4vw,56px); }
#product-tour .split--rev{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); }

/* tables: fit inside the frame without a horizontal slice */
.appshot-tbl th{ padding:8px 9px; }
.appshot-tbl td{ padding:7px 9px; }

/* KPI labels must wrap, never clip */
.appshot-kpi small{ overflow-wrap:anywhere; line-height:1.3; }

/* hero shows the real product, full bleed inside its frame */
.hero-mock .appshot{ box-shadow:0 50px 90px -40px rgba(0,0,0,.65); }

@media (max-width:880px){
  #product-tour .split,
  #product-tour .split--rev{ grid-template-columns:1fr; }
}