/* Case stories: readable proof, a concrete example, and one next step. */
.commercial-case { --case-ink:#123c45; --case-muted:#557079; background:#f7fafb; color:var(--case-ink); }
.commercial-case .site-header .brand small { display:none; }
.commercial-case .site-header { background:#fff; }
.commercial-case .header-action { min-height:44px; }
.commercial-case main { width:min(1160px,100% - 48px); margin:auto; padding:38px 0 64px; }
.commercial-case .case-back { display:inline-flex; align-items:center; min-height:44px; color:#247976; font-size:14px; font-weight:700; }
.commercial-case .case-story-hero { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:30px 0 54px; }
.commercial-case .case-story-brand { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.commercial-case .case-story-brand img { width:88px; height:52px; object-fit:contain; border-radius:8px; background:white; padding:7px; }
.commercial-case .case-story-brand img[src$="/vinco.png"] { background:#10243c; }
.commercial-case .case-story-brand small { display:block; margin-top:4px; color:var(--case-muted); font-size:13px; }
.commercial-case h1 { font-size:clamp(32px,3.5vw,48px); line-height:1.12; letter-spacing:-.045em; margin:0 0 20px; color:var(--case-ink); }
.commercial-case h1 span { display:inline; color:#087e79; }
.commercial-case .case-story-lead { font-size:17px; line-height:1.6; color:var(--case-muted); margin:0; }
.commercial-case .case-story-visual { padding:24px; background:linear-gradient(135deg,#e4f3ef,#eaf0fa); border:1px solid #cfe2df; border-radius:25px; }
.commercial-case .case-visual-caption { margin:15px 0 0; font-size:12px; line-height:1.5; color:var(--case-muted); }
.commercial-case .case-report { background:white; border-radius:17px; overflow:hidden; box-shadow:0 14px 30px #123c4510; }
.commercial-case .case-report header { padding:16px 18px; background:#123c45; color:#fff; display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.commercial-case .case-report header span { color:#b4e4d6; font-size:12px; }
.commercial-case .case-report-content { padding:22px; }
.commercial-case .case-time { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.commercial-case .case-time small { display:block; color:var(--case-muted); font-size:12px; margin-bottom:8px; }
.commercial-case .case-time strong { display:block; font-size:clamp(25px,3vw,38px); letter-spacing:-.04em; color:#087e79; }
.commercial-case .case-time .before strong { color:#75858a; font-size:23px; }
.commercial-case .case-report-lines { display:flex; gap:9px; align-items:flex-end; height:106px; margin:24px 0 16px; border-bottom:1px solid #cfe2df; }
.commercial-case .case-report-lines i { flex:1; height:var(--h); background:linear-gradient(#62c9bb,#177a80); border-radius:5px 5px 0 0; }
.commercial-case .case-report-sources { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--case-muted); }
.commercial-case .case-chat { background:#edf5f1; border-radius:17px; overflow:hidden; box-shadow:0 14px 30px #123c4510; }
.commercial-case .case-chat header { display:flex; align-items:center; gap:10px; background:#123c45; color:#fff; padding:16px; font-size:14px; }
.commercial-case .case-chat header i { width:9px; height:9px; border-radius:50%; background:#77d1b6; }
.commercial-case .case-chat-thread { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:22px 18px 28px; }
.commercial-case .case-chat-thread p { max-width:90%; margin:0; padding:11px 13px; border-radius:3px 14px 14px; background:#fff; color:var(--case-ink); font-size:14px; line-height:1.5; }
.commercial-case .case-chat-thread p.reply { align-self:flex-end; background:#d5eee5; border-radius:14px 3px 14px 14px; }
.commercial-case .case-chat-thread small { display:block; margin-top:7px; font-size:11px; color:#55796e; }
.commercial-case .case-story-section { padding:32px 0; border-top:1px solid #dbe7e8; }
.commercial-case h2 { font-size:clamp(25px,2.7vw,34px); line-height:1.18; letter-spacing:-.035em; margin:0 0 24px; color:var(--case-ink); }
.commercial-case .case-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.commercial-case .case-story-grid article { padding:22px; background:#fff; border:1px solid #dbe7e8; border-radius:17px; }
.commercial-case .case-story-grid small { display:block; color:#087e79; font-size:11px; font-weight:800; letter-spacing:.08em; margin-bottom:10px; }
.commercial-case .case-story-grid h3 { margin:0 0 10px; font-size:19px; line-height:1.3; }
.commercial-case .case-story-grid p,.commercial-case .case-story-fit p { margin:0; font-size:15px; line-height:1.6; color:var(--case-muted); }
.commercial-case .case-story-fit { max-width:760px; }
.commercial-case .case-story-fit h2 { margin-bottom:14px; }
.commercial-case .case-story-next { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding:30px; border-radius:20px; background:#123c45; color:white; }
.commercial-case .case-story-next h2 { color:#fff; font-size:27px; margin:0 0 9px; }
.commercial-case .case-story-next p { color:#c7e2df; margin:0; line-height:1.5; font-size:15px; }
.commercial-case .case-story-next .primary-button { background:#fff; color:#123c45; flex-shrink:0; min-height:48px; }
.commercial-case a:focus-visible { outline:3px solid #b57a1a; outline-offset:4px; }
@media(max-width:720px) {
  .commercial-case main { width:calc(100% - 32px); padding:16px 0 32px; }
  .commercial-case .case-story-hero { grid-template-columns:1fr; padding:16px 0 30px; gap:24px; }
  .commercial-case .case-story-brand { margin-bottom:18px; }
  .commercial-case .case-story-brand strong { font-size:14px; }
  .commercial-case .case-story-brand img { width:76px; height:46px; }
  .commercial-case h1 { font-size:34px; margin-bottom:16px; }
  .commercial-case .case-story-lead { font-size:16px; line-height:1.55; }
  .commercial-case .case-story-visual { padding:15px; border-radius:20px; }
  .commercial-case .case-report-content { padding:18px; }
  .commercial-case .case-story-grid { grid-template-columns:1fr; gap:12px; }
  .commercial-case .case-story-grid article { padding:18px; }
  .commercial-case .case-story-section { padding:27px 0; }
  .commercial-case .case-story-next { flex-direction:column; align-items:stretch; padding:22px; gap:20px; }
  .commercial-case .case-story-next h2 { font-size:25px; }
  .commercial-case .case-story-next .primary-button { text-align:center; justify-content:center; }
}