/* The tool → app bridge card (web/js/bridge.js). Same cream card as the tools' own notes,
   with the home page's store badges: a bold line, one sentence, one badge, one link. */
.bridge{position:relative;display:flex;gap:16px;align-items:flex-start;margin:16px 0;padding:18px 44px 16px 20px;border-radius:22px;background:var(--cream);text-align:left}
.bridge[hidden],[data-bridge-slot][hidden]{display:none}
.bridge-ic{width:40px;height:40px;flex:none;border-radius:11px;box-shadow:0 2px 6px rgba(60,35,20,.18)}
.bridge-b{min-width:0;flex:1}
.bridge-b p{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.bridge-b .bridge-t{margin:0 0 4px;font:600 17px/1.3 var(--sans);color:var(--ink)}
.bridge-b strong{color:var(--ink)}
.bridge-t strong{font-weight:inherit}
.bridge-more{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bridge-go{font-weight:650;text-decoration:none}
.bridge-go:hover{text-decoration:underline}
.bridge-stores{display:flex;flex-wrap:wrap;gap:10px 14px;margin:4px 0 12px}
.bridge-store{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 15px 0 12px;border:0;border-radius:12px;background:#15110E;color:#fff;position:relative;text-decoration:none;cursor:pointer;font:inherit;transition:transform .15s}
.bridge .bridge-store,.bridge .bridge-store:hover{color:#fff;opacity:1}
.bridge-store:hover{transform:translateY(-1px)}
.bridge-store svg{width:22px;height:22px;flex:none}
.bridge-store span{display:flex;flex-direction:column;align-items:flex-start;font:600 16px/1.05 var(--sans)}
.bridge-store small{font:500 10px/1.2 var(--sans);opacity:.75;letter-spacing:.02em}
.bridge-store[data-soon]::after{content:attr(data-soon);position:absolute;top:-9px;right:-8px;padding:4px 8px;border-radius:99px;background:var(--paper);color:var(--caramel);font:700 10.5px/1 var(--sans);letter-spacing:.04em;box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.bridge-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.bridge-b .bridge-links{margin:0 0 4px;font-size:15px}
.bridge-links a{font-weight:650;text-decoration:none}
.bridge-links a:hover{text-decoration:underline}
.bridge-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:99px;background:transparent;color:var(--muted);font:400 22px/1 var(--sans);cursor:pointer}
.bridge-x:hover{background:rgba(42,31,26,.06);color:var(--ink)}
.bridge :focus-visible{outline:2.5px solid var(--caramel);outline-offset:2px}
@media (max-width:560px){
  /* ≤ 200 px tall: only the title keeps clear of the ×, the sentence and the badge use the full width */
  .bridge{display:block;padding:14px 16px 0 18px}
  .bridge-ic{display:none}
  .bridge-b .bridge-t{margin-bottom:2px;padding-right:30px;line-height:1.25}
  .bridge-b .bridge-s:first-child{padding-right:30px}   /* the camera checker's card has no title */
  .bridge-b .bridge-s{margin-bottom:10px;line-height:1.45}
  .bridge-stores{margin:0}
  .bridge-stores:last-child{padding-bottom:16px}   /* no home link under it (own: true) */
  .bridge-store{flex:1;justify-content:center}
  .bridge-b .bridge-links{margin:0}
  .bridge-links a{display:inline-flex;align-items:center;min-height:40px}
}
.bridge:lang(cs) .bridge-b p{-webkit-hyphens:auto;hyphens:auto}