@import url('./theme.css');

/*
  Bookley marketing redesign (May 2026)
  Modern B2B SaaS for flexible space booking and billing
  
  Palette: calm green, charcoal text, soft pastels
  Style: minimal, premium, clear, spacious
*/

:root {
  /* Typography */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  
  /* Primary green palette */
  --primary: #047857;        /* emerald 700 */
  --primary-dark: #065f46;   /* emerald 900 */
  --primary-light: #ecfdf5;  /* emerald 50 */
  --primary-hover: #059669;  /* emerald 600 */

  /* Neutral palette */
  --bg: #fafafa;             /* off-white */
  --surface: #ffffff;
  --surface-hover: #fbfcfb;

  --border: #e5e7eb;         /* grey 200 */
  --border-light: #f3f4f6;   /* grey 100 */
  --border-dark: #d1d5db;    /* grey 300 */

  --text: #111827;           /* grey 900 */
  --text-light: #4b5563;     /* grey 700 */
  --text-lighter: #6b7280;   /* grey 500 */
  --text-muted: #9ca3af;     /* grey 400 */

  /* Soft accent pastels */
  --accent-purple: #f3e8ff;
  --accent-blue: #eff6ff;
  --accent-yellow: #fffbeb;
  --accent-pink: #fdf2f8;
  --accent-mint: #f0fdf4;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* Gradients */
  --hero-glow: radial-gradient(1000px circle at 15% 5%, rgba(4, 120, 87, 0.12), transparent 60%),
               radial-gradient(900px circle at 90% 35%, rgba(6, 95, 70, 0.08), transparent 55%);

  --cta-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: 3.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.25rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

p {
  margin: 0;
  line-height: 1.7;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-dark);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.5px;
}

.brand img {
  height: 36px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.nav-link:hover {
  background: var(--border-light);
  color: var(--primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-utility-link {
  color: var(--text-light);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.nav-utility-link:hover {
  color: var(--primary);
}

.nav-outline-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
}

.btn.header-cta {
  /* Match the .nav-outline-wrap (Contact sales) pill exactly:
     padding 7px 12px + 1px border + font 0.92rem/line-height 1 -> ~31px tall. */
  min-height: 0;
  padding: 7px 12px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: none;
}

.btn.header-cta.btn-primary,
.btn.header-cta.btn-primary:hover {
  box-shadow: none;
}

.nav-toggle {
  display: none;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-toggle:hover {
  border-color: var(--primary);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--primary-light);
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
}

.nav-toggle-bars span {
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: #334155;
  display: block;
}

.nav-toggle-label {
  line-height: 1;
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: rgba(250, 250, 250, 0.98);
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu-links {
  display: grid;
  gap: 10px;
  padding: 14px 0 16px;
}

.mobile-menu-link {
  color: var(--text);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.25;
}

.mobile-menu-cta {
  width: 100%;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 980px) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    display: block;
  }

  .header-inner {
    gap: 12px;
    padding: 12px 0;
  }

  .brand img {
    height: 30px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  /* Solid emerald pill, white text. No gradient, no shadow, no lift. */
  background: var(--primary);
  color: #ffffff;
  border: none;
  box-shadow: none;
}

.btn-primary:hover {
  /* Hover lightens the green a touch — text stays white, only the
     background subtly shifts. Going lighter (not darker) so the change
     is actually visible against the already-saturated emerald base. */
  background: var(--primary-hover);
  color: #ffffff;
  transform: none;
  filter: none;
  box-shadow: none;
}

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

.btn-secondary {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border-light);
  border-color: var(--text-light);
}

.btn-tertiary {
  background: transparent;
  color: var(--primary);
  border: none;
}

.btn-tertiary:hover {
  background: var(--primary-light);
}

/* Eyebrow labels */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

/* Hero section */
.hero {
  padding: 88px 0 72px;
  background-image: var(--hero-glow);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-heading {
  font-size: 3.5rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-heading .highlight {
  color: var(--primary);
}

@media (max-width: 768px) {
  .hero-heading {
    font-size: 2.25rem;
  }
}

.hero-subheading {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.hero-media {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-media.card {
  padding: 0;
  background: white;
}

/* Solutions hero photo mosaic (2x2) */
.hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  aspect-ratio: 14 / 9;
  background: white;
}

.hero-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .hero-mosaic {
    aspect-ratio: 4 / 3;
  }
}

/* Solutions hero calendar mock */
.hero-calendar {
  background: white;
  padding: 0;
  overflow: hidden;
}

.hero-calendar svg {
  display: block;
  width: 100%;
  height: auto;
}

.ui-mockup {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ui-mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  background: #fcfdfc;
}

.ui-dots {
  display: inline-flex;
  gap: 6px;
}

.ui-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
}

.ui-mockup-body {
  display: grid;
  grid-template-columns: 98px 1fr;
  min-height: 300px;
}

.ui-sidebar {
  background: #f8faf8;
  border-right: 1px solid var(--border-light);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-main {
  padding: 12px 14px;
  background: white;
}

/* Sidebar navigation */
.ui-sidebar-logo-bar {
  width: 60%;
  height: 18px;
  background: linear-gradient(90deg, rgba(4, 120, 87, 0.6) 0%, rgba(4, 120, 87, 0.2) 100%);
  border-radius: 4px;
  margin-bottom: 14px;
}

.ui-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-sidebar-navitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 5px;
  color: #9ca3af;
  transition: background 0.15s;
}

.ui-sidebar-navitem.active {
  background: rgba(4, 120, 87, 0.12);
  color: #047857;
}

.ui-sidebar-navitem svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ui-sidebar-navitem span {
  font-size: 0.63rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Live badge */
.ui-live-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #047857;
  background: #d1fae5;
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}

/* Metric row (billing dashboard) */
.ui-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ui-metric {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 9px 10px;
}

.ui-metric-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.ui-metric-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.ui-metric-value.warn {
  color: #b45309;
}

.ui-metric-value.ok {
  color: #047857;
}

/* Billing table */
.ui-table {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.ui-table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  gap: 4px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.6rem;
}

.ui-table-row:last-child {
  border-bottom: none;
}

.ui-table-row.header {
  background: #f9fafb;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.55rem;
}

.ui-table-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ui-pill.paid {
  background: #d1fae5;
  color: #065f46;
}

.ui-pill.pending {
  background: #fef3c7;
  color: #92400e;
}

/* Homepage simplification (May 2026) */
.home-hero {
  /* Generous top padding above the marketing copy AND generous bottom
     padding below the carousel — gives the hero image proper breathing
     room on both ends so it doesn't crash into the section that follows. */
  padding: clamp(72px, 9vh, 120px) 0 clamp(72px, 10vh, 128px);
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: flex-start;
}

.home-hero-stack {
  width: min(100%, 1140px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Larger gap creates the breathing room the carousel needs to feel
     like its own deliberate moment rather than crammed under the CTA. */
  gap: clamp(64px, 8vh, 104px);
}

.home-hero-copy {
  width: min(100%, 820px);
  gap: 16px;
  align-items: center;
  text-align: center;
}

.home-hero-copy .eyebrow {
  margin-bottom: 0;
}

.hero-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  justify-content: center;
  /* Roughly one regular space between the wordmark and the tagline. */
  gap: 0.28em;
  margin-bottom: 4px;
}

.hero-brand-logo {
  /* Tight SVG: viewBox 420x140, wordmark baseline at y=97. Aligning the
     wordmark baseline with the tagline baseline requires nudging the logo
     down by (height - 97/140 * height) = 0.307 * height. */
  height: 48px;
  width: auto;
  display: inline-block;
  transform: translateY(14.7px);
}

.hero-brand-tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.45rem;
  line-height: 1;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  .hero-brand-logo { height: 38px; transform: translateY(11.7px); }
  .hero-brand-tagline { font-size: 1.15rem; }
}

.home-hero-copy .hero-heading {
  font-size: clamp(4.2rem, 5.3vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
}

.home-hero-copy .hero-subheading {
  max-width: 700px;
  font-size: 1.31rem;
  line-height: 1.5;
}

.home-hero-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-light);
  text-align: center;
}

.home-hero-media {
  width: min(82vw, 1040px);
  max-width: 1040px;
  border-radius: 28px;
  border: 1px solid rgba(4, 120, 87, 0.16);
  box-shadow: 0 22px 62px rgba(17, 24, 39, 0.12);
  overflow: hidden;
}

.home-ui-mockup {
  border: none;
  border-radius: 0;
}

.home-ui-body {
  grid-template-columns: 116px 1fr;
  min-height: 448px;
}

.home-ui-main {
  padding: 12px;
  position: relative;
  --demo-duration: 12s;
}

.home-hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}

.home-hero-cta-row .hero-actions {
  margin-top: 12px;
  justify-content: center;
}

/* Subtle radial wash behind the carousel — the eye is led into the
   product mock instead of running into a hard edge against the page.
   Sits inside the home-hero so it doesn't affect the section below. */
.home-hero {
  position: relative;
  background:
    radial-gradient(640px 320px at 50% 72%, rgba(4, 120, 87, 0.07), transparent 70%);
}

.trial-trigger {
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.trial-trigger.btn-secondary:active,
.trial-trigger.btn-secondary.is-active {
  background: white;
  color: var(--text);
  border-color: var(--text-light);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.06);
}

.trial-trigger.btn-primary:active,
.trial-trigger.btn-primary.is-active {
  background: var(--primary-hover);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

.trial-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  z-index: 1600;
}

.trial-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.trial-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(8px);
}

.trial-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 460px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 26px 68px rgba(15, 23, 42, 0.26);
  padding: 24px 24px 22px;
}

.trial-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.trial-modal-close:hover {
  background: #f1f5f9;
  color: #334155;
}

.trial-modal-logo {
  width: 120px;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.trial-modal h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0f172a;
}

.trial-modal-subtext {
  margin: 8px 0 16px;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

#trial-modal-form {
  display: grid;
  gap: 8px;
}

.trial-modal-errors {
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: #fef2f2;
  color: #991b1b;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.trial-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.trial-modal-label {
  font-size: 0.83rem;
  color: #334155;
  font-weight: 600;
  margin-top: 3px;
}

#trial-modal-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#trial-modal-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

.trial-modal-submit {
  margin-top: 10px;
  min-height: 44px;
  font-weight: 700;
}

.trial-modal-legal {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
  text-align: center;
}

.trial-modal-legal a {
  color: #4b5563;
  text-decoration: underline;
}

.trial-modal-legal a:hover {
  color: #111827;
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 18px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner-text {
  flex: 1 1 280px;
  margin: 0;
}

.cookie-banner-text a {
  color: #047857;
  text-decoration: underline;
}

.cookie-banner-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: 100%;
  font-size: 0.8rem;
  color: #374151;
}

.cookie-banner-prefs label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.cookie-banner-prefs input[type="checkbox"][disabled] {
  cursor: not-allowed;
}

.cookie-banner-prefs span {
  color: #6b7280;
  font-size: 0.75rem;
}

.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-banner-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.cookie-banner-btn-primary {
  background: #047857;
  color: #fff;
}

.cookie-banner-btn-primary:hover {
  background: #065f46;
}

.cookie-banner-btn-secondary {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}

.cookie-banner-btn-secondary:hover {
  background: #f3f4f6;
}

@media (max-width: 520px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cookie-banner-actions {
    justify-content: flex-end;
  }
}

body.trial-modal-open {
  overflow: hidden;
}

body.trial-modal-open .header,
body.trial-modal-open main {
  filter: blur(3px);
}

.home-ui-topline,
.home-ui-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.66rem;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.home-ui-topline {
  margin-bottom: 8px;
}

.home-ui-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.hero-demo-app {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  min-height: 258px;
}

.hero-demo-sidebar {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: #f9fbfa;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-demo-brand {
  font-size: 0.66rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
  padding: 6px 8px 10px;
  border-bottom: 1px solid #e8eeec;
  margin-bottom: 3px;
}

.hero-demo-nav-item {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 9px;
  padding: 6px 8px;
}

.hero-demo-nav-item.active {
  background: rgba(4, 120, 87, 0.1);
  color: #047857;
}

.hero-demo-nav-settings {
  margin-top: auto;
}

.hero-demo-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-demo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.hero-demo-toolbar-left {
  min-width: 0;
}

.hero-demo-toolbar-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.hero-demo-toolbar-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

.hero-demo-toolbar-right {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-demo-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #dbe4e1;
  background: #fff;
  color: #4b5563;
  padding: 0 10px;
  font-size: 0.58rem;
  font-weight: 600;
}

.hero-demo-settings-pill {
  border-color: rgba(4, 120, 87, 0.24);
  color: #047857;
}

.hero-demo-calendar {
  position: relative;
  display: grid;
  grid-template-columns: 54px repeat(5, minmax(0, 1fr));
  grid-template-rows: 30px minmax(0, 1fr);
  gap: 4px;
  background: linear-gradient(180deg, #ffffff, #fbfcfb);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 10px;
  min-height: 216px;
  overflow: hidden;
}

.hero-demo-grid-head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
}

.hero-demo-grid-corner {
  background: #f8fafc;
  border-radius: 8px;
}

.hero-demo-time-rail {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
}

.hero-demo-time-rail span {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-right: 5px;
  font-size: 0.55rem;
  color: #94a3b8;
  font-weight: 600;
}

.hero-demo-lane {
  position: relative;
  grid-row: 2;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
  background-size: 100% calc(100% / 7);
  overflow: hidden;
}

.hero-demo-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.03), transparent 22%);
}

.hero-demo-lane-c1 { grid-column: 2; }
.hero-demo-lane-c2 { grid-column: 3; }
.hero-demo-lane-c3 { grid-column: 4; }
.hero-demo-lane-c4 { grid-column: 5; }
.hero-demo-lane-c5 { grid-column: 6; }

.hero-demo-booking {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: 9px;
  border: 1px solid transparent;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  padding: 5px 6px;
  font-size: 0.57rem;
  font-weight: 600;
  line-height: 1.15;
  color: #0f172a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 1;
}

.hero-demo-booking.mint {
  background: #d1fae5;
  border-color: rgba(4, 120, 87, 0.24);
  color: #065f46;
}

.hero-demo-booking.blue {
  background: #dbeafe;
  border-color: rgba(59, 130, 246, 0.24);
  color: #1d4ed8;
}

.hero-demo-booking.amber {
  background: #fef3c7;
  border-color: rgba(245, 158, 11, 0.24);
  color: #92400e;
}

.hero-demo-booking.rose {
  background: #fce7f3;
  border-color: rgba(236, 72, 153, 0.22);
  color: #9d174d;
}

.hero-demo-booking.violet {
  background: #ede9fe;
  border-color: rgba(139, 92, 246, 0.22);
  color: #5b21b6;
}

.hero-demo-booking-new,
.hero-demo-booking-sheet,
.hero-demo-confirm,
.hero-demo-benefits,
.hero-demo-settings-overlay {
  position: absolute;
  pointer-events: none;
}

.hero-demo-booking-new {
  left: calc(54px + 4px + 6px);
  width: calc((100% - 54px - 30px) / 5 - 12px);
  top: 43%;
  height: 29%;
  border-radius: 10px;
  border: 1px solid rgba(4, 120, 87, 0.28);
  background: linear-gradient(180deg, rgba(209, 250, 229, 0.97), rgba(236, 253, 245, 0.98));
  color: #065f46;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.97);
  animation: hero-new-booking 11s ease-in-out infinite;
  z-index: 6;
}

.hero-demo-booking-sheet {
  left: calc(54px + 4px + 26px);
  top: 19%;
  width: 200px;
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: #fff;
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.16);
  padding: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-sheet 11s ease-in-out infinite;
  z-index: 7;
}

.hero-demo-sheet-title {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}

.hero-demo-sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6rem;
  color: #475569;
  margin-top: 3px;
}

.hero-demo-sheet-row strong {
  color: #111827;
  font-weight: 700;
}

.hero-demo-confirm {
  right: 10px;
  top: 38px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid rgba(4, 120, 87, 0.26);
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 4px 8px;
  opacity: 0;
  animation: hero-confirm 11s ease-in-out infinite;
  z-index: 8;
}

.hero-demo-benefits {
  left: 68px;
  right: 12px;
  bottom: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  opacity: 0;
  animation: hero-benefits 11s ease-in-out infinite;
  z-index: 9;
}

.hero-demo-benefit-card {
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  padding: 6px 7px;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-benefit-rise 11s ease-in-out infinite;
}

.hero-demo-benefit-title {
  font-size: 0.5rem;
  line-height: 1.25;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-demo-benefit-text {
  margin-top: 2px;
  font-size: 0.46rem;
  line-height: 1.35;
  color: #475569;
}

.hero-demo-benefit-card:nth-child(1) { animation-delay: 0s; }
.hero-demo-benefit-card:nth-child(2) { animation-delay: 0.08s; }
.hero-demo-benefit-card:nth-child(3) { animation-delay: 0.16s; }
.hero-demo-benefit-card:nth-child(4) { animation-delay: 0.24s; }
.hero-demo-benefit-card:nth-child(5) { animation-delay: 0.32s; }
.hero-demo-benefit-card:nth-child(6) { animation-delay: 0.4s; }
.hero-demo-benefit-card:nth-child(7) { animation-delay: 0.48s; }
.hero-demo-benefit-card:nth-child(8) { animation-delay: 0.56s; }
.hero-demo-benefit-card:nth-child(9) { animation-delay: 0.64s; }

.hero-demo-settings-overlay {
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  opacity: 0;
  background: rgba(248, 250, 252, 0.6);
  backdrop-filter: blur(5px);
  animation: hero-settings-overlay 11s ease-in-out infinite;
  z-index: 10;
}

.hero-demo-settings-card {
  width: min(100%, 240px);
  border: 1px solid rgba(4, 120, 87, 0.16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
  padding: 10px;
  transform: translateX(10px);
  animation: hero-settings-card 11s ease-in-out infinite;
}

.hero-demo-settings-kicker {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 6px;
}

.hero-demo-settings-card h3 {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
}

.hero-demo-callout-grid {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-demo-callout {
  border-radius: 999px;
  border: 1px solid rgba(4, 120, 87, 0.2);
  background: #f8fffb;
  color: #065f46;
  padding: 4px 8px;
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
}

@keyframes hero-sheet {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  16%, 26% { opacity: 1; transform: translateY(0); }
  32%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes hero-new-booking {
  0%, 12% { opacity: 0; transform: scale(0.97); }
  18%, 34% { opacity: 1; transform: scale(1); }
  40%, 100% { opacity: 0; transform: scale(0.98); }
}

@keyframes hero-confirm {
  0%, 22% { opacity: 0; transform: translateY(4px); }
  28%, 42% { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes hero-benefits {
  0%, 34% { opacity: 0; }
  40%, 74% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes hero-benefit-rise {
  0%, 40% { opacity: 0; transform: translateY(8px); }
  46%, 72% { opacity: 1; transform: translateY(0); }
  78%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes hero-settings-overlay {
  0%, 72% { opacity: 0; }
  78%, 100% { opacity: 1; }
}

@keyframes hero-settings-card {
  0%, 72% { opacity: 0; transform: translateX(10px); }
  82%, 100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo-booking-new,
  .hero-demo-booking-sheet,
  .hero-demo-confirm,
  .hero-demo-benefits,
  .hero-demo-benefit-card,
  .hero-demo-settings-overlay,
  .hero-demo-settings-card {
    animation: none !important;
  }

  .hero-demo-booking-new,
  .hero-demo-booking-sheet,
  .hero-demo-confirm,
  .hero-demo-benefits,
  .hero-demo-benefit-card,
  .hero-demo-settings-overlay {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-demo-settings-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .hero-demo-app {
    grid-template-columns: 1fr;
    min-height: 286px;
  }

  .hero-demo-sidebar {
    display: none;
  }

  .hero-demo-toolbar {
    align-items: flex-start;
  }

  .hero-demo-toolbar-right {
    display: none;
  }

  .hero-demo-calendar {
    min-height: 244px;
  }

  .hero-demo-grid-head {
    font-size: 0.52rem;
  }

  .hero-demo-time-rail span {
    font-size: 0.52rem;
  }

  .hero-demo-booking {
    font-size: 0.52rem;
  }

  .hero-demo-booking-sheet {
    width: 166px;
  }

  .hero-demo-sheet-row {
    font-size: 0.54rem;
  }

  .hero-demo-benefits {
    left: 50px;
    right: 8px;
    bottom: 8px;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-demo-benefit-card {
    padding: 5px 6px;
  }

  .hero-demo-benefit-title {
    font-size: 0.47rem;
  }

  .hero-demo-benefit-text {
    font-size: 0.44rem;
  }

  .hero-demo-settings-card {
    width: min(100%, 198px);
  }

  .hero-demo-settings-card h3 {
    font-size: 0.72rem;
  }

  .hero-demo-callout {
    font-size: 0.5rem;
  }
}

.home-section {
  padding: 68px 0;
}

.home-section-header {
  margin-bottom: 24px;
}

.home-section-header h2 {
  margin: 0 0 10px;
}

.home-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-snapshot-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.home-snapshot-card h3 {
  margin: 12px 0 7px;
  font-size: 1.02rem;
}

.home-snapshot-card p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-light);
  line-height: 1.6;
}

.home-solutions {
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.03), rgba(4, 120, 87, 0));
}

.home-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.home-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 500;
}

.home-micro-note {
  margin: 16px 0 0;
  text-align: center;
  color: var(--text-lighter);
  font-size: 0.86rem;
}

.home-billing {
  padding-top: 30px;
}

.home-billing-band {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 28px;
  text-align: center;
}

.home-billing-band h2 {
  margin: 0 0 12px;
}

.home-billing-band p {
  margin: 0 0 20px;
  color: var(--text-light);
}

.home-final-cta {
  margin-top: 28px;
  margin-bottom: 30px;
  border-radius: 16px;
  padding: 58px 32px;
}

.home-final-cta .cta-trust::before {
  content: "";
}

/* Sections */
.section {
  padding: 60px 0;
  border-top: 1px solid var(--border);
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-eyebrow {
  display: block;
  margin-bottom: 12px;
}

.section-heading {
  font-size: 2.25rem;
  margin-bottom: 16px;
}

.section-subheading {
  font-size: 1.125rem;
  color: var(--text-light);
  max-width: 62ch;
  margin: 0 auto;
}

/* Cards */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
  border: 1px solid rgba(4, 120, 87, 0.12);
  margin: 0 auto 32px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

/* Cards that include an icon: centre icon, heading and copy. */
.card.card-feature,
.card:has(> .card-icon) {
  text-align: center;
}

.icon-chip {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(4, 120, 87, 0.14);
  box-shadow: var(--shadow-sm);
}

.icon-chip svg {
  width: 22px;
  height: 22px;
  stroke: var(--primary-dark);
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon.purple {
  background: var(--accent-purple);
}

.card-icon.blue {
  background: var(--accent-blue);
}

.card-icon.yellow {
  background: var(--accent-yellow);
}

.card-icon.pink {
  background: var(--accent-pink);
}

.card-icon.mint {
  background: var(--accent-mint);
}

.card h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.card p {
  color: var(--text-light);
  margin: 0 0 16px;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 18px;
  }

  .home-hero {
    padding: 46px 0 18px;
    min-height: auto;
  }

  .home-hero-stack {
    width: 100%;
    gap: 22px;
  }

  .home-hero-copy {
    width: 100%;
    gap: 14px;
  }

  .home-hero-copy .hero-heading {
    font-size: clamp(2.65rem, 12vw, 3.15rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }

  .home-hero-copy .hero-subheading {
    font-size: 1.06rem;
    line-height: 1.52;
    max-width: 100%;
  }

  .home-hero-media {
    width: 94vw;
    max-width: 94vw;
    border-radius: 20px;
  }

  .home-ui-body {
    grid-template-columns: 88px 1fr;
    min-height: 390px;
  }

  .home-hero-cta-row {
    width: 100%;
    gap: 10px;
  }

  .home-hero-cta-row .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .home-hero-cta-row .hero-actions .btn {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.94rem;
  }

  .trial-modal-panel {
    width: min(94vw, 440px);
    padding: 20px 16px 16px;
    border-radius: 16px;
  }

  .trial-modal-logo {
    width: 108px;
    margin-bottom: 12px;
  }

  .trial-modal h2 {
    font-size: 1.34rem;
  }

  .home-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Feature rows */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--border);
}

.feature-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.feature-copy h2 {
  margin-bottom: 20px;
}

.feature-copy p {
  color: var(--text-light);
  margin-bottom: 16px;
  line-height: 1.8;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.feature-list li {
  padding: 10px 0;
  padding-left: 24px;
  position: relative;
  color: var(--text-light);
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.feature-media {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.feature-strip {
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.02), rgba(4, 120, 87, 0.04));
  border: 1px solid rgba(4, 120, 87, 0.14);
  border-radius: 14px;
  padding: 18px;
}

.feature-strip-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px) {
  .feature-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .feature-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: var(--shadow-sm);
}

.feature-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-item h4 {
  margin: 10px 0 6px;
  font-size: 0.92rem;
}

.feature-item p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.83rem;
  line-height: 1.5;
}

.feature-media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Solution cards */
.solution-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  transition: all 0.22s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(4, 120, 87, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.22s;
}

.solution-card:hover {
  border-color: rgba(4, 120, 87, 0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.solution-card:hover::before {
  opacity: 1;
}

.solution-card-cta {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-color: rgba(4, 120, 87, 0.18);
}

.solution-card-icon {
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.solution-card h3 {
  margin-bottom: 12px;
}

.solution-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.solution-mini {
  margin: 14px 0 16px;
  height: 48px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.solution-mini::before,
.solution-mini::after {
  content: '';
  position: absolute;
  top: 8px;
  height: 8px;
  border-radius: 3px;
}

.solution-mini.consulting::before { left: 8px; width: 38%; background: rgba(139, 92, 246, 0.25); }
.solution-mini.consulting::after  { left: calc(38% + 16px); width: 40%; background: rgba(139, 92, 246, 0.15); top: 22px; }

.solution-mini.therapy::before { left: 8px; width: 45%; background: rgba(236, 72, 153, 0.2); }
.solution-mini.therapy::after  { left: calc(45% + 16px); width: 30%; background: rgba(236, 72, 153, 0.12); top: 22px; }

.solution-mini.studios::before { left: 8px; width: 55%; background: rgba(245, 158, 11, 0.25); }
.solution-mini.studios::after  { left: calc(55% + 16px); width: 20%; background: rgba(245, 158, 11, 0.15); top: 22px; }

.solution-mini.hotdesks::before { left: 8px; width: 25%; background: rgba(59, 130, 246, 0.25); }
.solution-mini.hotdesks::after  { left: calc(25% + 12px); width: 25%; background: rgba(59, 130, 246, 0.15); top: 22px; }

.solution-mini.training::before { left: 8px; width: 60%; background: rgba(4, 120, 87, 0.2); }
.solution-mini.training::after  { left: calc(60% + 16px); width: 22%; background: rgba(4, 120, 87, 0.12); top: 22px; }

.solution-mini.community::before { left: 8px; width: 70%; background: rgba(4, 120, 87, 0.18); }
.solution-mini.community::after  { left: 8px; width: 30%; background: rgba(4, 120, 87, 0.1); top: 24px; }

.solution-mini.wellness::before { left: 8px; width: 40%; background: rgba(236, 72, 153, 0.18); }
.solution-mini.wellness::after  { left: calc(40% + 14px); width: 35%; background: rgba(236, 72, 153, 0.1); top: 22px; }

.solution-mini.unique {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(4, 120, 87, 0.06) 6px,
    rgba(4, 120, 87, 0.06) 12px
  );
}

.solution-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary);
}

/* Pricing */
.pricing-header {
  text-align: center;
  margin-bottom: 48px;
}

.pricing-card {
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  position: relative;
}

.pricing-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .pricing-card.featured {
    transform: scale(1);
  }
}

.pricing-card h3 {
  margin: 0 0 24px;
  font-size: 1.5rem;
}

.pricing-price {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.pricing-period {
  font-size: 1rem;
  color: var(--text-light);
  font-weight: 400;
}

.pricing-features {
  list-style: none;
  padding: 32px 0;
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.pricing-features li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricing-features li::before {
  content: '✓';
  color: var(--primary);
  font-weight: 700;
  min-width: 20px;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-cta {
  margin-top: 28px;
  width: 100%;
}

.pricing-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-light);
}

.pricing-frequency-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px;
}

.pricing-frequency-tab {
  border: none;
  background: transparent;
  color: var(--text-light);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.pricing-frequency-tab.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.pricing-tab-save {
  color: var(--primary-dark);
  font-size: 0.75rem;
  margin-left: 4px;
}

.pricing-panel {
  display: none;
}

.pricing-panel.is-active {
  display: block;
}

.pricing-inline-note {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--text-light);
}

.pricing-annual-badge {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Feature table */
.feature-table-wrap {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;             /* scroll instead of wrap on narrow viewports */
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.feature-table th,
.feature-table td {
  text-align: left;
  padding: 12px 16px;
  vertical-align: top;
  border-top: 1px solid var(--border);
}

.feature-table thead th {
  background: rgba(4, 120, 87, 0.04);
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 0;
}

.feature-table tr.feature-cat-row td {
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.06), rgba(4, 120, 87, 0.03));
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-top: 2px solid rgba(4, 120, 87, 0.15);
}

.feature-table td.feature-name {
  font-weight: 600;
  color: var(--text);
  width: 30%;
  white-space: normal;
}

.feature-table td.feature-desc {
  color: var(--text-light);
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}

.feature-table sup a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.feature-disclaimers {
  margin: 18px 4px 0;
  color: var(--text-lighter);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .feature-table th,
  .feature-table td {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  .feature-table td.feature-name {
    width: auto;
  }
}

/* CTA sections */
.cta-section {
  background:
    radial-gradient(600px circle at 10% 0%, rgba(4, 120, 87, 0.14), transparent 65%),
    radial-gradient(550px circle at 90% 95%, rgba(4, 120, 87, 0.13), transparent 60%),
    linear-gradient(135deg, rgba(4, 120, 87, 0.05) 0%, rgba(6, 95, 70, 0.10) 100%);
  border: 1px solid rgba(4, 120, 87, 0.18);
  border-radius: 20px;
  padding: 72px 48px;
  text-align: center;
  margin: 60px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(4, 120, 87, 0.07);
}

.cta-section h2 {
  margin-bottom: 16px;
}

.cta-section p {
  color: var(--text-light);
  margin-bottom: 28px;
  font-size: 1.125rem;
}

.cta-section-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-trust {
  margin-top: 28px;
  color: var(--text-light);
  font-size: 0.875rem;
}

.cta-trust::before {
  content: '✓ ';
  color: var(--primary);
  font-weight: 700;
  margin: 0 4px 0 0;
}

.trust-wordmarks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  flex-wrap: wrap;
}

.trust-wordmarks span {
  color: #6b7280;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

/* Logo row */
.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.logo-row-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.logo-item {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Footer */
.footer {
  background: white;
  border-top: 1px solid var(--border);
  padding: 48px 0;
  margin-top: 60px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-section h3 {
  margin: 0 0 16px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: 10px;
}

.footer-section a {
  color: var(--text-light);
  font-size: 0.9rem;
}

.footer-section a:hover {
  color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-light);
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
  }
}

/* Utility classes */
.badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(4, 120, 87, 0.2);
}

.highlight {
  color: var(--primary);
}

.muted {
  color: var(--text-light);
}

.responsive {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* ==================================================================
   Pricing page (pricing-new.html) — simplified layout
   ================================================================== */

.pricing-hero {
  padding: 56px 0 0;
  background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%);
}

.pricing-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.pricing-hero-heading {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  color: #111827;
}

.pricing-hero-sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #4b5563;
  max-width: 560px;
  margin: 0 auto 14px;
}

.pricing-hero-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

.pricing-card-wrap {
  max-width: 560px;
  margin: 36px auto 0;
  padding: 0 12px 56px;
}

.pricing-card.featured {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  padding: 28px 28px 24px;
}

.pricing-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pricing-card-top h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pricing-card-top .pricing-frequency-tabs {
  margin: 0 auto;
}

.pricing-card .pricing-panel {
  display: none;
  text-align: center;
}

.pricing-card .pricing-panel.is-active {
  display: block;
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
}

.pricing-price-row .pricing-price {
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: #111827;
  margin: 0;
}

.pricing-price-unit {
  font-size: 0.85rem;
  line-height: 1.15;
  color: #6b7280;
}

.pricing-price-note {
  margin: 0 0 20px;
  color: #4b5563;
  font-size: 0.95rem;
  text-align: center;
}

.pricing-card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pricing-card-actions .btn {
  text-align: center;
  justify-content: center;
}

.pricing-card-list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #f1f5f4;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
  color: #374151;
}

.pricing-card-list li {
  position: relative;
  padding-left: 22px;
}

.pricing-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ecfdf5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center / 10px no-repeat;
}

.pricing-facts-section {
  padding-top: 120px;
}

.pricing-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-fact {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
}

.pricing-fact-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 8px;
}

.pricing-fact-value {
  font-size: 0.95rem;
  color: #111827;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .pricing-facts {
    grid-template-columns: 1fr;
  }
}

.pricing-included {
  max-width: 760px;
  margin: 0 auto;
}

.pricing-included-head {
  text-align: center;
  margin-bottom: 28px;
}

.pricing-included-head h2 {
  margin: 0 0 8px;
}

.pricing-included-head p {
  color: #6b7280;
  margin: 0;
}

.pricing-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
}

.pricing-included-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 0.95rem;
  color: #1f2937;
  border-bottom: 1px solid #f3f4f6;
}

.pricing-included-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ecfdf5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center / 11px no-repeat;
}

@media (max-width: 720px) {
  .pricing-included-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .pricing-included-list {
    grid-template-columns: 1fr;
  }
}

.pricing-billing-engine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, rgba(4, 120, 87, 0.04), rgba(6, 95, 70, 0.02));
  border: 1px solid rgba(4, 120, 87, 0.12);
  border-radius: 16px;
  padding: 36px;
}

.pricing-billing-engine h2 {
  margin: 8px 0 12px;
}

.pricing-billing-engine p {
  color: #4b5563;
  margin: 0 0 18px;
}

.pricing-billing-engine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.pricing-billing-engine-list li {
  position: relative;
  padding-left: 22px;
  color: #1f2937;
  font-size: 0.95rem;
}

.pricing-billing-engine-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ecfdf5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center / 10px no-repeat;
}

.pricing-billing-engine-visual svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.08));
}

@media (max-width: 720px) {
  .pricing-billing-engine {
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .pricing-billing-engine-list {
    grid-template-columns: 1fr;
  }
}

.pricing-faq {
  max-width: 720px;
  margin: 0 auto;
}

.pricing-faq h2 {
  text-align: center;
  margin-bottom: 24px;
}

.pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-faq-list details {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
}

.pricing-faq-list details[open] {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.pricing-faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  list-style: none;
}

.pricing-faq-list summary::-webkit-details-marker {
  display: none;
}

.pricing-faq-list summary span {
  font-weight: 400;
  color: #6b7280;
  transition: transform 0.15s ease;
}

.pricing-faq-list details[open] summary span {
  transform: rotate(45deg);
}

.pricing-faq-list details p {
  margin: 12px 0 0;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ----- Marketing forms (used on /contact/) ----- */

.marketing-form {
  margin-top: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.floating-field {
  position: relative;
  margin-bottom: 16px;
}

.floating-field input,
.floating-field select,
.floating-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}

.floating-field textarea {
  resize: vertical;
  min-height: 140px;
}

.floating-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-light) 50%),
    linear-gradient(135deg, var(--text-light) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.floating-field input:focus,
.floating-field select:focus,
.floating-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  outline: none;
}

.floating-field label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-light);
  padding: 0 4px;
  background: var(--surface);
  pointer-events: none;
  transition: all 0.15s ease;
}

.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:focus + label,
.floating-field textarea:not(:placeholder-shown) + label,
.floating-field select:focus + label,
.floating-field select[value]:not([value=""]) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.form-status {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-light);
}

.form-status.is-error {
  color: #b91c1c;
}

.form-status.is-success {
  color: var(--primary);
}

/* ----- Rooms gallery (used on /rooms/) ----- */

.rooms-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .rooms-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .rooms-gallery {
    grid-template-columns: 1fr;
  }
}

.rooms-gallery .card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rooms-gallery .card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #f3f4f6;
}

.rooms-gallery .card-body {
  padding: 16px 18px 18px;
}

.rooms-gallery .card-body h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.rooms-gallery .card-body p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.92rem;
}

/* ----- Company page philosophy visual ----- */

.philosophy-visual {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(4, 120, 87, 0.10), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(16, 185, 129, 0.10), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(4, 120, 87, 0.25);
}

.philosophy-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
  pointer-events: none;
}

.philosophy-visual-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 18px 48px -22px rgba(4, 120, 87, 0.45);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}

.philosophy-visual-mark img {
  width: 78px;
  height: 78px;
  display: block;
}

.philosophy-visual-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

.philosophy-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px -3px rgba(4, 120, 87, 0.25);
}

.philosophy-visual-caption {
  position: relative;
  margin: 0;
  color: var(--text-light);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .philosophy-visual {
    padding: 32px 24px 28px;
  }
  .philosophy-visual-mark {
    width: 108px;
    height: 108px;
  }
  .philosophy-visual-mark img {
    width: 64px;
    height: 64px;
  }
}

/* ============================================================
   Homepage hero carousel — rotates through five feature slides
   in a single shared "mac chrome" wrapper. Each slide reuses the
   same dark nav rail so it feels like five views of the same
   product, not five disconnected screenshots.
   ============================================================ */

.hero-carousel {
  width: min(82vw, 1040px);
  max-width: 1040px;
  position: relative;
}

.hero-carousel-frame {
  border-radius: 28px;
  border: 1px solid rgba(4, 120, 87, 0.16);
  box-shadow: 0 22px 62px rgba(17, 24, 39, 0.12);
  overflow: hidden;
  background: #fff;
}

.hero-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  min-width: 0;
  /* Generous margin inside the rounded carousel frame so the dark
     rail and chrome bar don't sit flush against the outer border. */
  padding: 26px;
  box-sizing: border-box;
}

/* Make the carousel frame's background slightly off-white so the
   padding band is visibly distinct from the inner mockup card.
   Without this, white-on-white made the inset invisible. */
.hero-carousel-frame {
  background: #f5f7fb;
}

/* Inner content gets its own rounding + visible border + soft lift
   so it reads as a polished card nested inside the frame. */
.hero-slide .bk-daycal,
.hero-slide .hero-slide-screen {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  background: #fff;
}

/* Caption sits ABOVE the carousel frame, dots BELOW. Both centred
   so the headline becomes the focal point and the dots are
   visually grounded to the slide they navigate.

   The padding inside the outer rounded container gives breathing
   room ABOVE the title and BELOW the dots — without it, both
   sit flush against the rounded border. */
.hero-carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(40px, 5vh, 64px) clamp(20px, 3vw, 40px);
}

.hero-carousel-caption {
  text-align: center;
  margin: 0 auto 22px;
  padding: 0 8px;
  max-width: 760px;
}
.hero-carousel-caption .hero-carousel-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary, #047857);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero-carousel-caption .hero-carousel-sub {
  font-size: 1.0625rem;
  color: #374151;
  margin: 0 auto;
  line-height: 1.55;
  max-width: 640px;
}

.hero-carousel-dots {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  justify-content: center;
  margin-top: 18px;
}
.hero-carousel-dot {
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: rgba(4, 120, 87, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, width 220ms ease;
}
.hero-carousel-dot:hover { background: rgba(4, 120, 87, 0.35); }
.hero-carousel-dot.is-active {
  background: var(--primary, #047857);
  width: 42px;
}
.hero-carousel-dot:focus-visible {
  outline: 2px solid var(--primary, #047857);
  outline-offset: 3px;
}

/* Mockup chrome reused across slides */
.hero-slide-screen {
  font-family: Inter, system-ui, sans-serif;
  color: #111827;
  background: #f9fafb;
  display: grid;
  grid-template-columns: 62px 1fr;
  height: 510px;
}
.hero-slide-rail {
  background: #0f172a;
  color: #cbd5e1;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-slide-rail-logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #6AA684;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.hero-slide-rail-item,
.hero-slide-rail-item-active {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8;
}
.hero-slide-rail-item-active {
  background: rgba(106,166,132,0.22);
  color: #A7D5B5;
  border: 1px solid rgba(106,166,132,0.45);
}
.hero-slide-rail-spacer { flex: 1; }
.hero-slide-rail-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A7D5B5, #6AA684);
  color: #1a3a26;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem;
}
.hero-slide-window {
  display: flex; flex-direction: column;
  min-width: 0;
}
.hero-slide-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.hero-slide-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hero-slide-titlebar .dot-r { background: #fca5a5; }
.hero-slide-titlebar .dot-y { background: #fcd34d; }
.hero-slide-titlebar .dot-g { background: #86efac; }
.hero-slide-titlebar .url { margin-left: 10px; font-size: 0.7rem; color: #9ca3af; }

.hero-slide-body {
  flex: 1 1 auto;
  background: #fff;
  padding: 18px 22px;
  overflow: hidden;
}

/* Slide-specific tweaks */
.hero-slide-h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hero-slide-h2 .hero-slide-h2-note {
  font-size: 0.7rem; color: #6b7280; font-weight: 500;
}

/* Pricing-rules slide rows */
.hero-pricing-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
  font-size: 0.78rem;
  align-items: center;
}
.hero-pricing-row + .hero-pricing-row { margin-top: 0; }
.hero-pricing-row .hero-pricing-name { font-weight: 600; color: #111827; }
.hero-pricing-row .hero-pricing-when { color: #6b7280; }
.hero-pricing-row .hero-pricing-price { color: #047857; font-weight: 700; text-align: right; }
.hero-pricing-row.is-featured { background: #ecfdf5; border-color: #a7f3d0; }
.hero-pricing-row .hero-pricing-badge {
  display: inline-block;
  font-size: 0.62rem;
  color: #065f46;
  background: rgba(4, 120, 87, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 600;
}

/* Members slide */
.hero-members-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hero-members-chip {
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-weight: 500;
}
.hero-members-chip.is-active { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hero-members-row {
  display: grid;
  grid-template-columns: 28px 1fr 100px 80px;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.78rem;
  align-items: center;
}
.hero-members-row:last-child { border-bottom: 0; }
.hero-members-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.65rem; color: #fff;
}
.hero-members-name { font-weight: 600; color: #111827; }
.hero-members-name .sub { display: block; font-weight: 400; color: #9ca3af; font-size: 0.7rem; margin-top: 1px; }
.hero-members-role { color: #6b7280; font-size: 0.72rem; }
.hero-members-status { color: #047857; font-size: 0.7rem; font-weight: 600; text-align: right; }
.hero-members-status.is-quiet { color: #9ca3af; font-weight: 500; }

/* Floor plan slide */
.hero-fp-stage {
  position: relative;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  padding: 12px;
}
.hero-fp-plan {
  position: relative;
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(15,23,42,0.04) 38px 39px),
              repeating-linear-gradient(90deg, transparent 0 38px, rgba(15,23,42,0.04) 38px 39px),
              #fff;
  border: 2px solid #1f2937;
  border-radius: 6px;
  overflow: hidden;
}
.hero-fp-room {
  position: absolute;
  border: 1.5px solid #1f2937;
  background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: #1f2937;
}
.hero-fp-room.is-hotspot {
  background: rgba(4, 120, 87, 0.28);
  border-color: rgba(4, 120, 87, 0.95);
  box-shadow: 0 0 0 2px rgba(106, 166, 132, 0.25) inset;
}
.hero-fp-room.is-active {
  background: rgba(4, 120, 87, 0.42);
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(106, 166, 132, 0.45) inset;
}
.hero-fp-side {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 12px;
  display: flex; flex-direction: column;
  font-size: 0.72rem;
}
.hero-fp-side h4 { margin: 0 0 2px; font-size: 0.85rem; color: #111827; }
.hero-fp-side .hero-fp-sub { color: #6b7280; font-size: 0.66rem; margin-bottom: 10px; }
.hero-fp-side .hero-fp-meta {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
}
.hero-fp-side .hero-fp-chip {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.62rem;
  color: #374151;
}
.hero-fp-side .hero-fp-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-bottom: 8px; }
.hero-fp-side .hero-fp-slot {
  height: 16px;
  border-radius: 3px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.hero-fp-side .hero-fp-slot.is-busy { background: #fef2f2; border-color: #fecaca; }
.hero-fp-side .hero-fp-free {
  background: #047857; color: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 6px;
  font-weight: 600;
  font-size: 0.7rem;
  margin-top: auto;
}

/* Invoicing slide */
.hero-inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
}
.hero-inv-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.hero-inv-card h4 { margin: 0 0 12px; font-size: 0.85rem; color: #111827; }
.hero-inv-stripe-band {
  font-size: 0.6rem; color: #6772e5; font-weight: 700;
  margin-bottom: 8px;
}
.hero-inv-line {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 0.72rem; color: #4b5563;
  border-bottom: 1px dashed #e5e7eb;
}
.hero-inv-line.is-total { font-weight: 700; color: #111827; border-bottom: 0; padding-top: 10px; }
.hero-inv-paystamp {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(4, 120, 87, 0.12);
  color: #047857;
  border: 1.5px solid #047857;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  transform: rotate(-8deg);
}
.hero-inv-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.hero-inv-status.is-paid { background: #ecfdf5; color: #047857; }
.hero-inv-status.is-pending { background: #fef9c3; color: #854d0e; }
.hero-inv-status.is-sent { background: #eff6ff; color: #1e40af; }
.hero-inv-recent-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 70px;
  gap: 8px;
  font-size: 0.72rem;
  padding: 7px 0;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
}
.hero-inv-recent-row:last-child { border-bottom: 0; }
.hero-inv-recent-row .hero-inv-recent-who { font-weight: 600; color: #111827; }
.hero-inv-recent-row .hero-inv-recent-amt { color: #4b5563; }
.hero-inv-recent-row .hero-inv-recent-status { text-align: right; }

@media (max-width: 720px) {
  .hero-slide-screen { grid-template-columns: 48px 1fr; height: 460px; }
  .hero-slide-body { padding: 12px 14px; }
  .hero-slide-h2 { font-size: 0.85rem; }
  .hero-pricing-row { font-size: 0.7rem; grid-template-columns: 1.2fr 1fr 0.8fr; }
  .hero-members-row { grid-template-columns: 24px 1fr 70px; }
  .hero-members-row .hero-members-status { display: none; }
  .hero-fp-stage { grid-template-columns: 1.4fr 1fr; }
  .hero-inv-grid { grid-template-columns: 1fr; }

  .hero-carousel-caption .hero-carousel-title { font-size: 1.35rem; }
  .hero-carousel-caption .hero-carousel-sub { font-size: 0.95rem; }
}

/* Honour reduced-motion: auto-rotate handled in JS too. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track { transition: none; }
  .hero-carousel-dot { transition: none; }
}

/* ============================================================
   Currency switcher — slim native-select chip in the marketing
   nav. Form-based so it works without JS (noscript fallback
   shows a "Set" button); JS auto-submits on change otherwise.
   ============================================================ */
.currency-switcher {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.currency-switcher-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text, #1f2937);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-weight: 500;
}
.currency-switcher-label:hover { border-color: #cbd5e1; background: #fff; }
.currency-switcher-label select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 0 18px 0 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  /* Custom caret since we removed native chrome. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
}
.currency-switcher-submit {
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  font-size: 0.78rem;
  cursor: pointer;
}
/* Hide on very narrow screens (mobile gets it inside the open menu). */
@media (max-width: 900px) {
  .nav-actions .currency-switcher { display: none; }
}

/* ============================================================
   Inline currency switcher — quiet text-only variant used on
   the pricing page only. Lives under the hero meta line and
   reads like a sentence: "Showing prices in AUD ($) ▾".
   ============================================================ */
.currency-switcher-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-light, #6b7280);
  line-height: 1.4;
}
.currency-switcher-inline-prefix {
  color: var(--text-light, #6b7280);
}
.currency-switcher-inline-label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  cursor: pointer;
  color: var(--primary, #047857);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.currency-switcher-inline-label:hover {
  text-decoration-color: rgba(4, 120, 87, 0.65);
}
.currency-switcher-inline-label select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}
.currency-switcher-inline-caret {
  font-size: 0.7em;
  color: var(--primary, #047857);
  margin-left: 1px;
}
.currency-switcher-inline-submit {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  font-size: 0.78rem;
  cursor: pointer;
}