/* ==========================================================================
   home-bento.css — desktop home style (contains its own <860px safety-net rules)
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:18px;margin-top:28px}
.tile{position:relative;overflow:hidden;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .22s ease,border-color .22s ease}
@media (hover:hover) and (pointer:fine){
 a.tile:hover{box-shadow:var(--shadow-hover)}
}
.tlabel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-3)}
.tlabel.lt{color:rgba(255,255,255,.85)}
.t-lead{grid-column:span 2;grid-row:span 2;padding:0;background:#1b2433;color:#fff;border-color:var(--border);box-shadow:var(--shadow)}
@media (hover:hover) and (pointer:fine){
 .t-lead:hover{box-shadow:var(--shadow-hover)!important}
}
.t-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,30,.94),rgba(8,16,30,.5) 45%,transparent 72%)}
.cap{position:absolute;inset-inline:0;bottom:0;padding:28px;display:flex;flex-direction:column;gap:10px}
.cap .pill{align-self:flex-start}
.cap h2{font-size:30px;line-height:1.5;font-weight:800}.cap p{color:rgba(255,255,255,.8);font-size:15px}
.meta.lt{color:rgba(255,255,255,.9)}.go{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;color:#a7d3ef;font-weight:700;font-size:14px}
.t-prod{grid-row:span 2;background:linear-gradient(180deg,#fff 0%,#eef6ff 100%)}
.t-prod .pimg{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.t-prod .pimg::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(29,107,201,.07),transparent 70%)}
.t-prod .pimg img{position:relative;max-height:220px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pinfo{display:flex;flex-direction:column;gap:2px}.pinfo h3{font-size:19px;font-weight:800}.pinfo small{color:var(--text-3)}
.pp{display:flex;align-items:baseline;gap:6px;margin-block:4px 8px}.pp b{font-size:21px;font-weight:900}.pp span{font-size:13px;color:var(--text-3)}
.btn.sm{height:40px;font-size:14px}
.t-tut{background:linear-gradient(150deg,#effdfa,#fff 60%)}.t-tut .tlabel{color:var(--teal)}
.t-tut h3{font-size:16px;line-height:1.75;font-weight:700}
.tm{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-3)}
.t-app{background:linear-gradient(150deg,#f5f1ff,#fff 60%)}.t-app .tlabel{color:var(--purple)}
.ar{display:flex;gap:12px;align-items:center;margin-top:auto}.ar h3{font-size:15.5px;font-weight:800;line-height:1.5}.ar small{color:var(--text-3);font-size:12.5px}
.ribbon{position:absolute;top:18px;inset-inline-end:18px;font-size:11px;font-weight:800;color:#9a4a06;background:#fdf0e1;padding:2px 9px;border-radius:7px}
.t-story{grid-column:span 2;flex-direction:row;padding:0;gap:0}
.simg{width:44%;flex:none}.simg img{width:100%;height:100%;object-fit:cover}
.stx{padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}.stx h3{font-size:17px;line-height:1.65;font-weight:800}.stx p{font-size:13.5px;color:var(--text-2);line-height:1.8}.stx .meta{margin-top:auto}
.bento .tile.is-chat{background:linear-gradient(140deg,#2566c4 0%,#5552bd 100%);color:#fff;border:0;padding:20px}
.bento .tile.is-chat h2,.bento .tile.is-chat h3{color:#fff}
.bento .tile.is-chat p{color:rgba(255,255,255,.85)}
.bento .tile.is-banner{padding:0;color:#fff;background:#0b1626;border:0}
.bento .tile.is-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .tile.is-product{background:linear-gradient(180deg,#fff 0%,#eef6ff 100%);color:var(--text);padding:20px}
.bento .tile.is-product .pimg img{position:relative;width:auto;max-height:220px;object-fit:contain;mix-blend-mode:multiply}
.t-chat{background:linear-gradient(140deg,#2566c4 0%,#5552bd 100%);color:#fff;border:0}
.t-chat h3{font-size:19px;font-weight:800;margin-top:auto}.t-chat p{font-size:13px;color:rgba(255,255,255,.85);line-height:1.8}
.cic{position:absolute;top:16px;inset-inline-end:16px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(48,209,88,.3)}
.t-hours{gap:6px}
.status{font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.status.open{color:#15803d}.status.closed{color:var(--red)}
.t-hours ul{font-size:13px}.t-hours li{display:flex;justify-content:space-between;gap:6px;color:var(--text-2)}.t-hours li b{color:var(--text);font-weight:700}
.hph{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--primary);flex-wrap:wrap}
.feedhead{flex-wrap:wrap}
.tabs{display:flex;gap:4px;background:var(--surface-2);border:0;border-radius:12px;padding:3px;box-shadow:none;margin-inline-end:auto;margin-inline-start:20px}
.tab{border:0;background:none;padding:7px 20px;border-radius:10px;font-weight:700;font-size:14.5px;color:var(--text-2);cursor:pointer}
.tab.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.08)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.fgrid[hidden]{display:none}
.tgrad{width:100%;height:100%;display:grid;place-items:center;color:#fff}
.allc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--primary);background:var(--accent-soft);border-style:dashed}
.allc b{font-size:18px}.allc span{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--text-2)}
.appc{display:flex;gap:14px;padding:18px;align-items:flex-start}.appc>div{flex:1;min-width:0}
.appc h3{font-size:15px;font-weight:800;line-height:1.6}.appc small{color:var(--text-3);font-size:12.5px}
.arow{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.arow em{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px}.arow em.free{background:#dcfce7;color:#15803d}.arow em.paid{background:var(--accent-soft);color:var(--primary-ink)}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
 .bento{grid-template-columns:1fr 1fr;grid-auto-rows:168px;gap:12px;margin-top:16px}
 .tile{padding:14px;border-radius:var(--r-lg);gap:6px}
 .t-lead{grid-column:span 2;grid-row:span 2}.cap{padding:18px}.cap h2{font-size:20px}.cap p{display:none}
 .t-prod{grid-row:span 2}.t-prod .pimg img{max-height:130px}.pinfo h3{font-size:15px}.pp b{font-size:16px}.btn.sm{height:36px}
 .t-tut h3{font-size:13.5px;-webkit-line-clamp:3}.tm .pill{display:none}
 .t-app .ar{flex-direction:column;align-items:flex-start;gap:6px}.t-app .app-ic{width:46px;height:46px}.ar h3{font-size:13px}.ribbon{top:12px;inset-inline-end:12px;font-size:10px}
 .t-story{grid-column:span 2}.simg{width:40%}.stx{padding:12px 14px}.stx h3{font-size:14.5px}.stx p{display:none}
 .t-chat h3{font-size:16px}.t-chat p{font-size:11.5px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.cic{width:42px;height:42px;top:12px;inset-inline-end:12px}
 .t-hours ul{font-size:11.5px}.t-hours li{flex-direction:column;gap:0}.hph a:nth-child(3){display:none}.status{font-size:13.5px}
 .tabs{order:3;width:100%;margin:6px 0 0;overflow-x:auto}.tab{flex:1;padding:7px 10px}
 .fgrid{grid-template-columns:1fr 1fr;gap:12px}
 .fgrid .post .body{padding:10px 12px 12px;gap:4px}.fgrid .post h3{font-size:13.5px;line-height:1.7}.fgrid .post p{display:none}.fgrid .post .meta{font-size:11.5px}
 .appc{flex-direction:column;padding:14px;gap:8px}.appc h3{font-size:13px}
}