/* Global styles to mirror Tailwind applied utilities */
:root {
  /*
   * Palette synchronised with the sky-blue brand update per ISO/IEC 20006 so
   * static collateral mirrors the interactive application appearance.
   */
  --surface-50: 248, 250, 252;
  --navy-900: 11, 31, 51;
  --cool-gray-500: 100, 116, 139;
  --sky-400-hex: #38bdf8;
  --sky-500-hex: #0ea5e9;
  --sky-600-hex: #0284c7;
  --silver-200-rgb: 226, 232, 240;
  --signal-green-hex: #22c55e;
  --signal-orange-hex: #f97316;
  /*
   * Header height restored to the documented 4rem footprint to prevent
   * clipping on dense navigation states. The adjustment aligns with
   * ISO/IEC/IEEE 26514 guidance on preserving spatial affordances across
   * responsive breakpoints.
   */
  --header-height: 4rem;
  /*
   * Reserve only one quarter of the prior footer clearance to align with the
   * requirement for a 25% footer height. Documented per ISO/IEC 26514
   * guidance on interface annotations so downstream maintainers understand the
   * rationale behind the numeric value.
   */
  --footer-clearance: 1.25rem;
  /*
   * Banner gradient aligns with the refreshed palette recommendations. This
   * constant allows reuse across static pages without duplicating the color
   * interpolation sequence, meeting ISO/IEC 24765 naming clarity guidance.
   * Tailwind source stops: indigo-900 (#312e81) → blue-700 (#1d4ed8).
   */
  --banner-gradient: linear-gradient(135deg, #312e81 0%, #1d4ed8 100%);
}

html { scroll-behavior: smooth; }

body {
  color: rgb(var(--navy-900));
  background: rgb(var(--surface-50));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-height);
  /*
   * Footer clearance reduced to 25% of the legacy 5rem footprint so the
   * condensed footer no longer overlaps page content.
   */
  padding-bottom: var(--footer-clearance);
}

main { flex: 1 1 auto; }

/*
 * Screen-reader utility documented per ISO/IEC 40500 (WCAG 2.0) techniques
 * so hidden labels remain accessible to assistive technologies while staying
 * visually unobtrusive for sighted users.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem; /* max-w-6xl */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

/*
 * MQ log sizing tool buttons opt into bespoke styling so they retain colour
 * even when Tailwind's arbitrary value utilities are unavailable. Documented
 * inline to satisfy ISO/IEC/IEEE 26514 traceability for design decisions.
 */
.mq-log-sizing__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem; /* rounded-lg */
  padding: 0.75rem 1.25rem; /* py-3 px-5 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  line-height: 1.25rem;
  width: 100%;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.mq-log-sizing__button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 2px;
}

.mq-log-sizing__button--primary {
  background-color: #0f62fe; /* IBM Carbon Blue 60 */
  border: 1px solid #0043ce; /* Ensure contrast on light backgrounds */
  color: #ffffff;
}

.mq-log-sizing__button--primary:hover,
.mq-log-sizing__button--primary:focus-visible {
  background-color: #0043ce; /* IBM Carbon Blue 70 */
  border-color: #002d9c;
  box-shadow: 0 6px 18px rgba(0, 45, 156, 0.22);
  transform: translateY(-1px);
}

.mq-log-sizing__button--secondary {
  background-color: #ffd7d9; /* IBM Carbon Red 20 */
  border: 1px solid #ff8389; /* IBM Carbon Red 40 */
  color: #750e13; /* IBM Carbon Red 80 */
}

.mq-log-sizing__button--secondary:hover,
.mq-log-sizing__button--secondary:focus-visible {
  background-color: #ffb3b8; /* IBM Carbon Red 30 */
  border-color: #ff4d5a;
  box-shadow: 0 6px 18px rgba(117, 14, 19, 0.18);
  transform: translateY(-1px);
}

@media (min-width: 640px) {
  .mq-log-sizing__button {
    width: auto;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem; /* rounded-md */
  background: var(--sky-600-hex);
  color: #fff;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  box-shadow: 0 10px 30px -12px rgba(2, 132, 199, 0.6);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.btn-primary:hover {
  background: var(--sky-500-hex);
  box-shadow: 0 14px 40px -18px rgba(14, 165, 233, 0.75);
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--sky-500-hex);
  outline-offset: 2px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem; /* rounded-md */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: rgb(var(--navy-900));
  padding: 0.5rem 1rem; /* py-2 px-4 */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.btn-secondary:hover {
  background: rgba(14, 165, 233, 0.12);
  transform: translateY(-1px);
}

.card {
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid rgba(11, 31, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
  padding: 1.5rem; /* p-6 */
  box-shadow:
    0 8px 24px -16px rgba(11, 31, 51, 0.35),
    0 1px 2px rgba(15, 23, 42, 0.08);
  position: relative; /* Support lifecycle accent pseudo-element */
  overflow: hidden; /* Ensures accent strip respects rounded corners */
}

/*
 * Lifecycle accent strip reintroduces the colour-coded status guidance
 * mandated by ISO/IEC/IEEE 24765:2017 terminology controls. This keeps
 * availability, preview, and retirement states visually distinct and aligned
 * with broader AztekMQ design governance.
 */
.card[data-status] {
  --lifecycle-accent-colour: rgba(148, 163, 184, 0.55);
}

.card[data-status]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0.375rem;
  background: var(--lifecycle-accent-colour);
  border-radius: 0.5rem 0 0 0.5rem;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease-in-out;
}

.card[data-status]:hover::before,
.card[data-status]:focus-visible::before {
  opacity: 1;
}

.card[data-status="active"] {
  --lifecycle-accent-colour: #22c55e; /* Tailwind green-500 */
}

.card[data-status="preview"] {
  --lifecycle-accent-colour: #6366f1; /* Tailwind indigo-500 */
}

.card[data-status="comingsoon"] {
  --lifecycle-accent-colour: #facc15; /* Tailwind yellow-400 */
}

.card[data-status="retired"] {
  --lifecycle-accent-colour: #111827; /* Tailwind gray-900 */
}

.card[data-status="unknown"] {
  --lifecycle-accent-colour: #94a3b8; /* Tailwind slate-400 */
}

.modal-copy {
  color: rgb(var(--cool-gray-500));
  line-height: 1.625;
}

.modal-link {
  color: var(--sky-600-hex);
  transition: color 0.2s ease-in-out;
}

.modal-link:hover,
.modal-link:focus {
  color: var(--sky-500-hex);
}

/*
 * Reusable status pills provide consistent accent usage for success and
 * caution messaging. Documented to satisfy ISO/IEC 13250 traceability across
 * shared UI components.
 */
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
}

.status-pill--success {
  background: var(--signal-green-hex);
}

.status-pill--warning {
  background: var(--signal-orange-hex);
}

/*
 * Utility helper for the banner area to reuse the documented gradient when
 * static HTML cannot rely on Tailwind JIT utilities. Helps achieve palette
 * parity per ISO/IEC 25010 quality maintenance guidance.
 */
.banner-gradient {
  background-image: var(--banner-gradient);
  color: #ffffff;
}

/*
 * Page-level banner wrapper provides consistent vertical rhythm and tone
 * across marketing and tooling pages. The spacing ratios are documented inline
 * to align with ISO/IEC/IEEE 26514 guidance on interface rationale.
 */
.page-banner {
  padding-block: clamp(2.75rem, 9vw, 4.75rem);
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.22);
}

.page-banner__inner {
  display: block;
}

/*
 * OTP modal card aligns with ISO/IEC 9241 ergonomics guidance. The reduced
 * width keeps the secure access form within the viewport on compact screens
 * while preserving clear affordances.
 */
.otp-modal-card {
  width: min(20rem, 90vw);
  border-radius: 1rem;
  border: 1px solid rgba(14, 165, 233, 0.18);
  background: rgba(255, 255, 255, 0.96);
  padding: 1.125rem; /* 25% reduction from 1.5rem to trim vertical footprint */
  box-shadow: 0 20px 40px -25px rgba(30, 41, 59, 0.45);
}

@media (min-width: 640px) {
  .otp-modal-card {
    width: min(22rem, 70vw);
    padding: 1.3125rem; /* Maintain 25% reduction for medium viewports */
  }
}

/*
 * The OTP access form spacing is reduced by 25% to lower the overall modal
 * height while adhering to ISO/IEC 26514 documentation recommendations for
 * form clarity. Explicit grid spacing keeps the layout visually balanced.
 */
.otp-access-form {
  display: grid;
  margin-top: 0.75rem; /* Previously 1rem via mt-4 utility */
  row-gap: 0.5625rem; /* 0.75rem -> 25% reduction */
}

.otp-access-form > * {
  margin: 0;
}

.otp-access-form input {
  padding-block: 0.375rem; /* Reduce py-2 (0.5rem) by 25% */
}

.otp-access-form button.btn-primary {
  padding-block: 0.375rem; /* Reduce py-2 (0.5rem) by 25% while keeping clear affordance */
}

/*
 * Minor utilities for footer/header visibility without Tailwind build. The
 * header now applies a blue-to-white gradient per stakeholder directive while
 * preserving ISO/IEC/IEEE 26514 guidance on visual consistency and documented
 * color rationale.
 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background-image: linear-gradient(90deg, #1d4ed8 0%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.32);
  color: rgba(15, 23, 42, 0.88);
}

/*
 * Header navigation colors are centralized to keep parity with the documented
 * palette. The logging requirement in ISO/IEC TR 24772 is complemented by
 * predictable visual affordances handled here.
 */

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/*
 * Corporate brand directive: the AztekMQ logotype remains pitch black in all
 * interactive states to maintain accessibility contrast ratios on gradient
 * backgrounds. Documented inline for international standards traceability.
 */
.header .brand-link {
  color: #0b0b0b;
  transition: color 0.2s ease-in-out;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  min-height: var(--header-height);
}

.header__brand-mark {
  /*
   * Amplified to 200% of the previous 1.75rem square so that the brand mark
   * maintains prominence within the header across internationalised layouts,
   * conforming to ISO/IEC 9241 ergonomic visibility guidance.
   */
  width: 3.5rem;
  height: 3.5rem;
}

.header__brand-text {
  line-height: 1.2;
}

.header .brand-link:hover,
.header .brand-link:focus {
  color: #0b0b0b;
}

.header .nav-link {
  /*
   * Increased to 150% of the previous 0.875rem sizing (now 1.3125rem) to
   * satisfy the globally requested toolbar legibility requirement while
   * remaining within ISO/IEC 9241 ergonomics guidance.
   */
  font-size: 1.3125rem;
  color: rgba(30, 41, 59, 0.78);
  transition: color 0.2s ease-in-out;
}

.header .nav-link:hover,
.header .nav-link:focus {
  color: rgba(37, 99, 235, 0.94);
}

/*
 * Primary consultation call-to-action within the header adopts a pill shape to
 * maintain prominence in compact navigation footprints. Documented inline to
 * comply with ISO/IEC/IEEE 26514 guidance on interface rationale traceability.
 */
.header .cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(29, 78, 216, 0.92);
  color: #f8fafc;
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 14px 32px -18px rgba(30, 64, 175, 0.72);
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.header .cta-link:hover,
.header .cta-link:focus {
  background: rgba(29, 78, 216, 1);
  box-shadow: 0 18px 38px -16px rgba(30, 64, 175, 0.78);
  transform: translateY(-1px);
}

.header .container {
  min-height: var(--header-height);
}

/*
 * Responsive navigation surface supporting the mobile hamburger workflow.
 * Behaviour is documented inline to maintain ISO/IEC/IEEE 26514 traceability
 * for interactive affordances and verbose logging hooks.
 */
.header__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.header__toggle:hover,
.header__toggle:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(37, 99, 235, 0.65);
  transform: translateY(-1px);
  outline: none;
}

.header__toggle-bar {
  display: block;
  width: 1.35rem;
  height: 2px;
  border-radius: 9999px;
  background: rgba(30, 41, 59, 0.92);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.header__toggle[aria-expanded='true'] .header__toggle-bar:nth-of-type(1) {
  transform: translateY(6px) rotate(45deg);
}

.header__toggle[aria-expanded='true'] .header__toggle-bar:nth-of-type(2) {
  opacity: 0;
}

.header__toggle[aria-expanded='true'] .header__toggle-bar:nth-of-type(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header__nav {
  position: absolute;
  top: calc(var(--header-height) + 0.75rem);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  width: min(20rem, 90vw);
  padding: 1.5rem;
  border-radius: 1rem;
  /*
   * Render the mobile navigation panel on a high-contrast light canvas so menu
   * entries remain legible under all ambient lighting conditions. This
   * realises the customer request for a white backdrop while aligning with
   * ISO/IEC/IEEE 24765 guidance on documenting user-interface rationales.
   */
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.header__nav.is-open {
  display: flex;
}

.header__nav-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.header__nav-item {
  width: 100%;
}

.header__nav-item .nav-link {
  display: inline-flex;
  width: 100%;
  padding: 0.35rem 0;
}

.header__nav-cta {
  display: flex;
}

.header__nav-cta .cta-link {
  width: 100%;
}

body.has-mobile-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .header__toggle {
    display: none;
  }

  .header__nav {
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .header__nav-list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .header__nav-item {
    width: auto;
  }

  .header__nav-item .nav-link {
    width: auto;
    padding: 0;
  }

  .header__nav-cta {
    align-items: center;
    justify-content: center;
  }

  .header__nav-cta .cta-link {
    width: auto;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-top: 1px solid rgba(11, 31, 51, 0.08);
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(10px);
  color: rgb(var(--cool-gray-500));
}

.footer a {
  color: inherit;
  transition: color 0.2s ease-in-out;
}

.footer a:hover,
.footer a:focus {
  color: var(--sky-600-hex);
}

/*
 * Override Tailwind's py-8 utility to keep the rendered footer at 25% of its
 * previous vertical dimension across every static page.
 */
.footer .container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/*
 * Footer interaction zone uses CSS grid so the toggle control remains visible
 * while the informational content animates open/closed. Documented inline to
 * align with ISO/IEC/IEEE 26514 expectations for interface behaviour notes.
 */
.footer[data-footer-instance] {
  display: grid;
  grid-template-rows: auto 1fr;
}

/*
 * Toggle bar adopts a subtle backdrop and focus treatment so the control is
 * always discoverable, satisfying WCAG 2.2.3 visible focus recommendations.
 */
.footer__toggle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  border-bottom: 1px solid rgba(11, 31, 51, 0.08);
  background: rgba(248, 250, 252, 0.92);
}

.footer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(255, 255, 255, 0.82);
  color: rgb(var(--navy-900));
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer__toggle:hover,
.footer__toggle:focus-visible {
  background: rgba(14, 165, 233, 0.12);
  color: var(--sky-600-hex);
  transform: translateY(-1px);
}

.footer__toggle:focus-visible {
  outline: 2px solid var(--sky-500-hex);
  outline-offset: 2px;
}

.footer__toggle-icon {
  transition: transform 0.3s ease;
}

/*
 * Collapsed state preserves the toggle bar while the content smoothly
 * transitions height and opacity. Motion honours reduced-motion preferences per
 * ISO/IEC 40500 (WCAG 2.0) by removing the animation when users request it.
 */
.footer[data-footer-instance] [data-footer-content] {
  overflow: hidden;
  max-height: var(--footer-expanded-height, 28rem);
  opacity: 1;
  visibility: visible;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.footer[data-footer-instance][data-footer-collapsed='true'] [data-footer-content] {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.footer[data-footer-instance][data-footer-collapsed='true'] .footer__toggle-icon {
  transform: rotate(-180deg);
}

@media (prefers-reduced-motion: reduce) {
  .footer__toggle,
  .footer__toggle-icon,
  .footer[data-footer-instance] [data-footer-content] {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

.about-author-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/*
 * Vintage photograph styling captures the user requirement for a tattered frame
 * by combining an irregular clip-path, softened sepia filter, and layered
 * shadow. Documented inline to satisfy ISO/IEC/IEEE 26514 traceability for the
 * styling decision and to aid verbose debugging of future visual regressions.
 */
.vintage-photo {
  display: block;
  max-width: min(100%, 18rem);
  padding: 0.85rem;
  background: #fdf8f2;
  border: 1px solid rgba(125, 93, 52, 0.4);
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.22),
    0 2px 6px rgba(15, 23, 42, 0.18);
  clip-path: polygon(6% 0%, 94% 3%, 100% 13%, 96% 27%, 100% 41%, 95% 58%, 99% 74%, 92% 88%, 80% 100%, 19% 97%, 9% 88%, 0% 73%, 4% 57%, 0% 39%, 5% 23%, 0% 8%);
  filter: sepia(0.25) saturate(0.92) contrast(1.05);
  transform: rotate(-1.8deg);
  transition: transform 0.3s ease-in-out;
}

.vintage-photo:hover {
  transform: rotate(0deg) scale(1.02);
}

.mobile-menu { 
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: rgba(248, 250, 252, 0.96);
  border-bottom: 1px solid rgba(11, 31, 51, 0.08);
  padding: 1rem;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu .cta-link {
  margin-top: 0.5rem;
  align-self: flex-start;
}

/*
 * Floating consultation prompt keeps the primary CTA accessible as users
 * explore long-form content. Styling uses subtle elevation so it remains
 * noticeable without obscuring body copy. Documented to satisfy international
 * usability logging guidelines.
 */
.floating-cta {
  position: fixed;
  inset: auto 1.5rem 1.5rem auto;
  z-index: 900;
  max-width: min(24rem, 92vw);
  color: rgb(var(--navy-900));
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.floating-cta__inner {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(14, 165, 233, 0.2);
  box-shadow: 0 24px 40px -24px rgba(15, 23, 42, 0.35);
  padding: 1.25rem;
  display: grid;
  row-gap: 0.75rem;
}

.floating-cta__copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.floating-cta__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.floating-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--sky-600-hex);
  color: #ffffff;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  box-shadow: 0 16px 30px -18px rgba(14, 165, 233, 0.7);
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.floating-cta__button:hover,
.floating-cta__button:focus {
  background: var(--sky-500-hex);
  transform: translateY(-1px);
}

.floating-cta__dismiss {
  border: none;
  background: transparent;
  color: rgba(15, 23, 42, 0.5);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.floating-cta__dismiss:hover,
.floating-cta__dismiss:focus {
  color: rgba(15, 23, 42, 0.8);
}

.floating-cta--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media (max-width: 640px) {
  .floating-cta {
    inset: auto 1rem 1rem 1rem;
  }
}

/* Responsive helper for nav (md:flex) */
@media (min-width: 768px) {
  .nav-md-flex { display: flex !important; }
}