/* ==========================================================================
   Custom styles — put YOUR overrides here (loaded after css/styles.css).
   ========================================================================== */

html { scroll-behavior: smooth; }
[hidden] { display: none !important; }

/* Mega menu: dimmed page behind the open dropdown */
.mega-backdrop {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(32, 32, 32, 0.12);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.mega-backdrop.is-open { opacity: 1; pointer-events: auto; }
#floating-header.mega-open { background-color: #f7f7f4 !important; }
[data-mega-viewport] { height: auto !important; }

/* FAQ answer content */
.faq-answer p + p, .faq-answer ul + p, .faq-answer p + ul { margin-top: 0.75rem; }
.faq-answer ul { list-style: disc; padding-left: 1.25rem; }
.faq-answer li + li { margin-top: 0.35rem; }
.faq-learn-more { color: #202020; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.faq-learn-more:hover { color: #AB9172; }

/* MCP dropdowns */
.mcp-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 16rem; padding: 4px;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  font-size: 14px; color: #202020;
}
.mcp-dropdown--right { left: auto; right: 0; }
.mcp-dropdown button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px; border-radius: 8px; text-align: left; cursor: pointer;
}
.mcp-dropdown button:hover { background: rgba(0, 0, 0, 0.04); }
.mcp-dropdown img, .mcp-dropdown svg { width: 20px; height: 20px; object-fit: contain; }
.mcp-dropdown hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); margin: 4px 0; }
button.is-copied { color: #059669; border-color: #059669 !important; }

/* --------------------------------------------------------------------------
   Cards that sit on a LIGHT background image (applied per card via .card-on-light)
   -------------------------------------------------------------------------- */
.card-on-light { background: #efe7f3; }
.card-on-light h3 { color: #202020; }
.card-on-light p { color: #55524f; }
.card-on-light .learn-more-pill {
  border-color: #fff;
  background: #fff;
  color: #202020;
}
.card-on-light .learn-more-pill:hover,
.card-on-light:hover .learn-more-pill {
  background: #fff;
  box-shadow: 0 6px 18px -8px rgba(60, 45, 90, 0.35);
}

/* Video-grid mock on the "Host AI meetings" card.
   Own rules rather than Tailwind arbitrary values — the compiled stylesheet
   only contains the classes the original build used. */
.host-mock { left: 24px; right: 16px; top: 60%; bottom: auto; }
.host-mock .capture-card { border-radius: 12px; }
.host-tile { border-radius: 6px; }
.host-tile.is-speaking { box-shadow: 0 0 0 2px #fff; }
/* Panel sits in the bottom-right corner and runs off both edges, so its right
   and bottom sides are cropped by the card. */
@media (min-width: 768px) {
  .host-mock { left: 32%; right: -5%; top: auto; bottom: -24%; }
}
@media (min-width: 1024px) {
  .host-mock { left: 34%; }
}

/* "Import meeting history" mock: the Importing toast straddles the bottom-right
   corner of the list — about a third of it overlaps, the rest hangs below. */
.import-mock { padding-bottom: 44px; }
/* Narrow screens: the card is shorter, so scale the mock down to keep the
   toast inside it */
@media (max-width: 767px) {
  .import-mock { padding-bottom: 30px; }
  .import-scale { zoom: 0.8; }
}
@media (max-width: 480px) {
  .import-mock { padding-bottom: 26px; }
  .import-scale { zoom: 0.72; }
}
/* Scaled so the toast clears the card's bottom edge instead of touching it */
@media (min-width: 768px) { .import-scale { zoom: 1.15; } }
@media (min-width: 1024px) { .import-scale { zoom: 1.22; } }
@media (min-width: 1280px) { .import-scale { zoom: 1.28; } }
.import-list { width: 86%; }
.import-toast { right: 0; bottom: 0; width: 80%; }

/* --------------------------------------------------------------------------
   "Meeting detected" mock inside the Capture card — matches the Figma reference
   -------------------------------------------------------------------------- */

/* Frosted tray with the dotted white outline */
.capture-tray {
  padding: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  background: rgb(255 255 255 / 35%);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 8px 30px rgba(90, 70, 120, 0.08);
}

/* White card with a soft gradient stroke */
.capture-card {
  position: relative;
  border-radius: 12px;
  background: #fff;
  /* .is-dark keeps the dark video panel on the "Host AI meetings" card */
  box-shadow: 0 10px 30px -12px rgba(60, 45, 90, 0.28), 0 2px 6px rgba(60, 45, 90, 0.06);
  overflow: hidden;
}

.capture-card.is-dark { background: #111214; }

.capture-head { padding: 12px 14px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.capture-head p { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: #202020; }

.capture-rows { display: flex; flex-direction: column; gap: 8px; padding: 10px; }

.capture-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  background: #fff;
}
.capture-row.is-selected {
  border-color: #9db2fb;
  background: #eef2ff;
  box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.18);
}

.capture-ico {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 30px; height: 30px;
  border-radius: 9px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.capture-ico img { width: 17px; height: 17px; }

.capture-meta { min-width: 0; flex: 1; }
.capture-name { font-size: 11px; font-weight: 600; color: #202020; line-height: 1.25; }
.capture-sub { margin-top: 1px; font-size: 9px; line-height: 1.3; color: #8a8985; }

.capture-check {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 18px; height: 18px;
  border-radius: 50%; background: #4f7cf7; color: #fff;
  box-shadow: 0 2px 6px rgba(79, 124, 247, 0.4);
}

.capture-toast { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; }
.capture-toast-ico {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: #0f9d6e;
}

/* --------------------------------------------------------------------------
   Capture cycle animation — one 6s loop, all pieces share the same timeline:
     0.0s  reset (nothing highlighted, no ticks, popup hidden)
     0.5s  Google Meet row highlights and its blue tick pops in
     1.8s  tick and highlight leave Meet and hand over to Zoom
     2.2s  Zoom's blue tick pops in
     2.4s  "Capturing meeting" popup rises in, dots start
     3.4s  green check appears and the label cross-fades to "Captured meeting"
     4.0s  everything holds, then loops
   Only runs while the card is on screen.
   -------------------------------------------------------------------------- */
.capture-mock .capture-row { position: relative; }

/* The Google Meet tick is only visible while that row is the active one */
.capture-check-meet { opacity: 0; }

/* "Capturing meeting …" cross-fading to "Captured meeting" — both states are
   stacked in one grid cell so the popup never changes width mid-transition.
   The resting state (no animation) is the finished one. */
.capture-status { display: grid; justify-items: start; }
.capture-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; white-space: nowrap; }
.capture-status-a { opacity: 0; }
.capture-status-b { opacity: 1; }
.capture-mock.is-playing .capture-status-a { animation: capture-status-out 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-status-b { animation: capture-status-in 6s ease-in-out infinite; }

@keyframes capture-status-out {
  0%, 56%   { opacity: 1; transform: translateY(0); }
  63%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes capture-status-in {
  0%, 57%   { opacity: 0; transform: translateY(3px); }
  66%, 100% { opacity: 1; transform: translateY(0); }
}

/* Three animated dots after "Capturing meeting" */
.capture-dots { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.capture-dots i { width: 3px; height: 3px; border-radius: 50%; background: #9a9a95; opacity: 0.35; }
.capture-mock.is-playing .capture-dots i { animation: capture-dot 1.2s ease-in-out infinite; }
.capture-mock.is-playing .capture-dots i:nth-child(2) { animation-delay: 0.15s; }
.capture-mock.is-playing .capture-dots i:nth-child(3) { animation-delay: 0.3s; }

.capture-mock.is-playing .capture-row[data-row="meet"] { animation: capture-meet-row 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-row[data-row="zoom"] { animation: capture-zoom-row 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-check-meet { animation: capture-meet-check 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-row[data-row="zoom"] .capture-check { animation: capture-check-in 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-popup { animation: capture-popup-in 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-toast-ico { animation: capture-toast-check 6s ease-in-out infinite; }
.capture-mock.is-playing .capture-toast-text { animation: capture-toast-shift 6s ease-in-out infinite; }

@keyframes capture-meet-row {
  0%, 6%    { border-color: rgba(0, 0, 0, 0.07); background: #fff; box-shadow: none; }
  12%, 26%  { border-color: #9db2fb; background: #eef2ff; box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.18); }
  32%, 100% { border-color: rgba(0, 0, 0, 0.07); background: #fff; box-shadow: none; }
}

@keyframes capture-zoom-row {
  0%, 28%   { border-color: rgba(0, 0, 0, 0.07); background: #fff; box-shadow: none; }
  34%, 100% { border-color: #9db2fb; background: #eef2ff; box-shadow: 0 0 0 1px rgba(91, 124, 250, 0.18); }
}

/* Tick appears on Google Meet while it is active, then leaves as the
   selection hands over to Zoom, where the tick reappears. */
@keyframes capture-meet-check {
  0%, 9%    { opacity: 0; transform: scale(0.4); }
  15%       { opacity: 1; transform: scale(1.18); }
  19%       { transform: scale(0.97); }
  22%, 26%  { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes capture-check-in {
  0%, 30%   { opacity: 0; transform: scale(0.4); }
  37%       { opacity: 1; transform: scale(1.18); }
  41%       { transform: scale(0.97); }
  45%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes capture-popup-in {
  0%, 40%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  47%       { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes capture-toast-check {
  0%, 56%   { opacity: 0; transform: scale(0.4); }
  62%       { opacity: 1; transform: scale(1.25); }
  67%       { transform: scale(0.96); }
  71%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes capture-toast-shift {
  0%, 56%   { transform: translateX(-27px); }
  64%, 100% { transform: translateX(0); }
}

@keyframes capture-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 0.85; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .capture-mock.is-playing .capture-row[data-row="meet"],
  .capture-mock.is-playing .capture-row[data-row="zoom"],
  .capture-mock.is-playing .capture-check,
  .capture-mock.is-playing .capture-check-meet,
  .capture-mock.is-playing .capture-popup,
  .capture-mock.is-playing .capture-toast-ico,
  .capture-mock.is-playing .capture-toast-text,
  .capture-mock.is-playing .capture-status-a,
  .capture-mock.is-playing .capture-status-b,
  .capture-mock.is-playing .capture-dots i { animation: none; }
}

/* --------------------------------------------------------------------------
   Window stack — the static graphic in the "Capture on Zoom, Google Meet and
   Microsoft Teams" card. Three cascading meeting windows plus a small capture
   readout, each in its own .capture-tray so the dashed frame matches the rest.
   -------------------------------------------------------------------------- */
.winstack { position: relative; height: 232px; }
.winstack-win { position: absolute; width: 74%; }
.winstack-win.w1 { left: 0;    top: 0;    z-index: 1; opacity: 0.96; }
.winstack-win.w2 { left: 13%;  top: 58px; z-index: 2; }
.winstack-win.w3 { left: 26%;  top: 116px; z-index: 3; }

.winstack-bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.winstack-bar i { width: 6px; height: 6px; border-radius: 50%; background: #e4e4e2; flex: 0 0 auto; }
.winstack-bar .winstack-line { width: 38px; margin-left: 4px; }

.winstack-body { display: flex; align-items: center; gap: 9px; padding: 10px 9px; }
.winstack-logo {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 6px; border-radius: 9px;
  background: #f7f7f6; flex: 0 0 auto;
}
.winstack-logo img { width: 100%; height: 100%; object-fit: contain; }
.winstack-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.winstack-line { display: block; height: 5px; border-radius: 3px; background: #e7e9ee; }
.winstack-line.sm { height: 4px; background: #eef0f4; }
.winstack-lines .winstack-line:first-child { width: 64%; }

/* The one window that is being captured */
.winstack-capturing { font-size: 9px; font-weight: 600; letter-spacing: -0.01em; color: #202020; }
.winstack-rec { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-left: auto; flex: 0 0 auto; }

/* Small capture readout, floating clear of the stack */
.winstack-live { position: absolute; right: 0; top: 142px; width: 44%; z-index: 4; }
.winstack-live .capture-card { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.winstack-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); flex: 0 0 auto; }
.winstack-bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex: 0 0 auto; }
.winstack-bars i { width: 2px; border-radius: 1px; background: #AB9172; }
.winstack-bars i:nth-child(1) { height: 40%; }
.winstack-bars i:nth-child(2) { height: 78%; }
.winstack-bars i:nth-child(3) { height: 55%; }
.winstack-bars i:nth-child(4) { height: 92%; }
.winstack-bars i:nth-child(5) { height: 46%; }

/* Hide scrollbars on the horizontal carousels */
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Wireframe stage: pure white page.
   The compiled Tailwind build is frozen, so the cream comes from three places
   in css/styles.css that all have to be overridden here (custom.css loads
   after styles.css, so equal specificity wins on order):
     L1946  body:has(.marketing-light)   #f7f7f4
     L1947  .marketing-light             #f7f7f4
     L659   .bg-[#f7f7f4]                #f7f7f4   (43 uses in index.html)
   Scoped to these selectors on purpose — components.html uses none of them,
   so its own page styling is untouched.
   -------------------------------------------------------------------------- */
body:has(.marketing-light),
.marketing-light,
.bg-\[\#f7f7f4\],
.\!bg-\[\#f7f7f4\] { background-color: #fff; }

/* The marquee edge fades are gradients, not backgrounds, so the rule above
   does not reach them — they kept fading to cream and read as tinted bands
   against the white page. Both Tailwind rules resolve their stops through
   var(), so overriding the two colour variables is enough.
   6 uses of each: both logo rows and the integrations strip. */
.from-\[\#f7f7f4\] { --tw-gradient-from: #fff; }
.via-\[\#f7f7f4\]\/80 { --tw-gradient-via: rgba(255, 255, 255, 0.8); }