:root {
  --bg1: #f0f7fa;          /* light bluish background */
  --bg2: #ffffff;          /* soft white blend */
  --panel: #f8fbfd;        /* panel background */
  --ink: #1a202c;          /* dark gray text */
  --muted: #4a6078;        /* muted bluish text */
  --accent1: #38b2ac;      /* teal */
  --accent2: #4299e1;      /* blue */
  --danger: #e53e3e;       /* red */
  --radius: 12px;
  --panel-heading-bg: rgba(17,27,34,0.96); /* dark heading background */
  --panel-heading-color: #ffffff; /* text color for panel headings */
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--ink);
  line-height: 1.6;
}

/* Scoped landing wrapper to avoid Bulma collisions */
.canaries-landing {
  padding: 40px 32px;
}

/* Keep a generic .wrap for other pages, but prefer scoped variant when both present */
.canaries-landing.wrap { max-width: 80%; padding: 40px 32px; }

.canaries-landing h1 { font-size: 42px; margin: 0 0 16px; }
.canaries-landing h2 { font-size: 28px; margin: 40px 0 16px; }
.canaries-landing .lead { font-size: 18px; color: var(--muted); margin: 0 0 20px; }

.canaries-landing .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .canaries-landing .hero { grid-template-columns: 1fr; } }

.canaries-landing .chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.canaries-landing .chip { background: #e2eef6; border-radius: 999px; padding: 6px 12px; color: var(--muted); font-size: 14px; }

.canaries-landing .cta {
  display: inline-block; margin-top: 10px; padding: 10px 18px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  border-radius: var(--radius); color: white; font-weight: 700; text-decoration: none;
}

/* Heartbeat scope */
.canaries-landing .scope {
  background: #eef4f9;
  border: 1px solid #cbd5e0;
  border-radius: var(--radius);
  padding: 16px;
  overflow: hidden;
  min-height: 220px;
  max-width: 600px;  /* constrain width */
}
.canaries-landing .gridlines line { stroke: #d6e0eb; }
.canaries-landing .pulse {
  fill: none;
  stroke: url(#gradPulse);
  stroke-width: 3;
  stroke-dasharray: 18 10;
  animation: dash 12.4s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -320; } }
.canaries-landing .flatline { stroke: var(--danger); stroke-width: 3; opacity: 0; }
.canaries-landing .scope.alarm .pulse { opacity: 0.2; }
.canaries-landing .scope.alarm .flatline { opacity: 1; }

.canaries-landing .panel {
  background: var(--panel);
  border: 1px solid #dbe6ef;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Ensure global .panel and panel-heading have consistent, high-contrast appearance
   so p.panel-heading (Bulma default) is readable even when placed on darker areas. */
.panel {
  background: var(--panel);
  border: 1px solid #dbe6ef;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  overflow: hidden;
}
.panel .panel-heading,
.panel-heading {
  display: block; /* p.panel-heading is block by default, but ensure consistency */
  /* Keep a dark header background (matching the site's darker accents), but
     ensure the text is light for good contrast. Use !important only here to
     override conflicting utility classes that might apply different backgrounds. */
  background-color: var(--panel-heading-bg) !important;
  background-image: none !important;
  color: var(--panel-heading-color) !important; /* ensure high contrast */
   font-weight: 700;
   padding: .75rem 1rem;
   margin: 0; /* reset margins for headings inside panels */
   border-bottom: 1px solid rgba(255,255,255,0.06);
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
}
/* Ensure links inside panel headings are readable and not underlined */
.panel .panel-heading a,
.panel-heading a { color: var(--panel-heading-color) !important; text-decoration: none !important; }
.panel .panel-heading a:hover, .panel-heading a:hover { text-decoration: underline !important; }
.panel .panel-block { padding: .75rem 1rem; }

.canaries-landing .table { width: 100%; border-collapse: collapse; }
.canaries-landing .table th, .canaries-landing .table td { padding: 12px; text-align: left; font-size: 14px; border-bottom: 1px solid #e2e8f0; }
.canaries-landing .table th { color: var(--ink); background: #f0f6fa; }

.canaries-landing .badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.canaries-landing .alive { background: #c6f6d5; color: #22543d; }
.canaries-landing .dead { background: #fed7d7; color: #742a2a; }

.canaries-landing .benefits { list-style: none; padding: 0; margin: 0; }
.canaries-landing .benefits li { margin-bottom: 12px; }

.canaries-landing .small { font-size: 12px; color: var(--muted); }

/* Keep footer global so base.html continues to style site-wide footer */
.footer { text-align: center; padding: 40px 20px; font-size: 14px; color: var(--muted); }

/* Navbar visual tweaks: remove harsh white background and make it softer/translucent
   This overrides Bulma defaults safely and keeps contrast for buttons/links. */
.navbar {
  background: transparent !important; /* transparent by default */
  backdrop-filter: saturate(110%) blur(6px);     /* soft blur for depth */
  -webkit-backdrop-filter: saturate(110%) blur(6px);
  box-shadow: 0 1px 0 rgba(16,24,40,0.03);      /* very subtle bottom line */
  border-bottom: 1px solid rgba(16,24,40,0.02);
}

/* When navbar is scrolled or active you might want a slightly stronger background;
   site JS toggles .navbar--solid */
.navbar.navbar--solid { background: rgba(255,255,255,0.92) !important; }

/* Stronger overrides for Bulma variants that might force a white background */
.navbar, .navbar.is-white, .navbar.has-background-white, .navbar.is-light, .navbar.is-fixed-top {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure the menu part is also transparent when collapsed/expanded */
.navbar .navbar-menu, .navbar .navbar-end, .navbar .navbar-start {
  background: transparent !important;
}

/* If any ancestor applied a background via utility classes, try clearing it for navbar container */
.container > .navbar, .navbar.container, .navbar .container {
  background: transparent !important;
}

/* Ensure navbar text and icons remain readable over the translucent background */
.navbar .navbar-item,
.navbar .navbar-link,
.navbar .navbar-burger,
.navbar .navbar-brand .navbar-item {
  color: var(--ink);
}

/* Tweak sign-up/login buttons to remain visible */
.navbar .button.is-light {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--ink);
}

.navbar .button.is-primary {
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: #fff;
  border: none;
}

/* Extra high-specificity clear for the transparent navbar state */
.container > nav.navbar.is-transparent,
nav.navbar.is-transparent,
nav.navbar.is-transparent .navbar-menu,
nav.navbar.is-transparent .navbar-start,
nav.navbar.is-transparent .navbar-end {
  background: transparent !important;
  background-color: transparent !important;
  z-index: 40; /* keep navbar above page content */
}

/* Also reset any background utilities on immediate children */
nav.navbar.is-transparent *[class*="has-background"],
nav.navbar.is-transparent *[class*="is-white"] {
  background: transparent !important;
}

/* Keep expanded mobile menu transparent when navbar is in transparent state */
nav.navbar.is-transparent .navbar-menu.is-active,
nav.navbar.is-transparent .navbar-menu.is-active .navbar-end,
nav.navbar.is-transparent .navbar-menu.is-active .navbar-start {
  background: transparent !important;
}

/* Additional Bulma-friendly overrides for account connections/cards */
.container .title.is-1,
.container .title.is-2,
.container .title.is-3,
.container .title.is-4 {
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Slightly reduce the huge default Bulma H1 so it matches site feel */
.container .title.is-1 { font-size: 36px; line-height:1.1; }
.container .title.is-2 { font-size: 28px; }

.container p { color: var(--muted); }

/* Cards: softer panels matching site theme */
.container .card {
  background: var(--panel);
  border: 1px solid rgba(27,46,60,0.06);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(14,30,37,0.04);
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
}
.container .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(14,30,37,0.06);
}

/* Card content spacing */
.container .card .card-content { padding: 18px; }

/* Media block: align icon and text */
.container .media { align-items: center; }
.container .media .media-left { margin-right: 12px; }

/* Small logos: slightly rounded and constrained */
.container .image.is-48x48 img,
.container figure.image img {
  width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display:block;
}

/* Link styling inside cards */
.container .card .media-content .title.is-4 a {
  color: var(--ink);
  text-decoration: none;
}
.container .card .media-content .title.is-4 a:hover {
  color: var(--accent2);
  text-decoration: underline;
}

/* Make actions area compact on small screens */
@media (max-width: 768px) {
  .container .card { padding: 10px; }
  .container .columns.is-multiline .column { margin-bottom: 0.75rem; }
  /* Ensure card content stacks neatly on mobile */
  .container .media { align-items: flex-start; }
}

/* Utility: subtle divider between cards on narrow views */
.container .columns.is-multiline .column .card { min-height: 84px; }

/* Accessibility: focus states for links in cards */
.container .card a:focus { outline: 3px solid rgba(66,153,225,0.18); outline-offset: 2px; }

/* Emphasize top-level titles (H1) with dark background and bright text.
   Targets <h1 class="title is-1"> and <h1 class="title">Your API Key</h1> etc.
   Placed late in the stylesheet so it overrides earlier .title rules. */
.container h1.title.is-1,
.container h1.title {
  background-color: var(--panel-heading-bg); /* dark background */
  color: var(--panel-heading-color); /* bright text */
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(14,30,37,0.06);
  margin-bottom: 12px;
}
/* On very small screens make the title full-width for better wrapping */
@media (max-width: 600px) {
  .container h1.title.is-1,
  .container h1.title { display: block; width: 100%; padding-left: 12px; padding-right: 12px; }
}