/* Styles for the embedded on-device tool card. Its base layout is set inline in the tool's
   markup (src/main.js buildToolCard); these are the rules that must live in a stylesheet.
   The homepage keeps an identical copy inline in index.html; the SEO landing pages load this
   file (both share the same /assets/tool.js). Keep the two in sync if the tool layout changes. */
html { scroll-behavior: smooth; }
#tool-card button { font-family: inherit; }
.cf-hover:hover { filter: brightness(1.06); }
@keyframes cf-slidein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Reserve the card's height so injecting the tool does not shift the page (CLS), and offset
   the scroll target below the sticky header. Mirrors index.html's #tool-card rules exactly.
   NOTE: the landing #tool-card must NOT set min-height inline, or these are overridden. */
#tool-card { min-height: 576px; scroll-margin-top: 84px; }
@media (max-width: 820px) {
  .cf-toolgrid { grid-template-columns: 1fr !important; }
  .cf-rightpanel { border-left: 0 !important; border-top: 1px solid rgba(26, 21, 18, .08) !important; }
  #tool-card { min-height: 940px; }
}
@media (max-width: 560px) {
  .cf-modetoggle { display: flex !important; width: 100% !important; }
  .cf-modetoggle button { flex: 1 1 0 !important; min-width: 0 !important; }
  .cf-tabsub { display: none !important; }
  #tool-card { min-height: 1000px; }
}