* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  /* Layer 1: diagonal lines  •  Layer 2: your gradient */
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0 4px, transparent 4px 60px),
    linear-gradient(135deg, #0a0f2c, #031328, #001a3d);
  /* Keep the lines and gradient pinned to the viewport (like your fixed ::before) */
  background-attachment: fixed, fixed;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  color: #3ab4f2;
}
/* header links */
.navbar nav a {
  margin-left: 1.5rem;
  color: white;
  text-decoration: none;
}

/* active/selected link, anywhere in the header */
.navbar a.cta {
  color: #00c3ff;
  font-weight: bold;
}

/* === Three-zone navbar layout (logo left • middle centered • right aligned) === */
.navbar { position: fixed; left: 0; right: 0; } /* already fixed, reiterating for positioning context */

/* middle group */
.navbar .nav-center{
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: center;
}
/* remove the generic margin in the centered group; we use gap */
.navbar .nav-center a{ margin: 0; }

/* right single link (Dashboard) — match header link look */
.navbar .nav-right{
  color: white;
  text-decoration: none;
  margin-left: auto; /* pushes it to the far right in base (flex) layout */
}

/* Small phones: tighten spacing and font size slightly */
@media (max-width: 560px){
  .navbar{ padding: 0.9rem 1rem; }
  .navbar .nav-center{ gap: .9rem; }
  .navbar nav a, .navbar .nav-right{ font-size: .95rem; }
}

/* Wide-screen 3-zone header layout (inside the frame) */
@media (min-width: 1200px){
  .navbar .nav-frame{
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | center links | Dashboard */
    align-items: center;
    gap: 20px;
  }
  .navbar .nav-frame .nav-center{
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .navbar .nav-frame .nav-right{
    justify-self: end;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
  .navbar .nav-frame .nav-center a:first-child{ margin-left: 0 !important; }
}

@media (max-width: 1199px){
  .navbar .nav-frame{
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .navbar .nav-frame .nav-center{
    order: 3;
    width: 100%;
    display:flex;
    justify-content:center;
    gap: 12px;
  }
  .navbar .nav-frame .nav-right{ order: 2; }
  .navbar .nav-frame .logo{ order: 1; }
}

/* Make the active state work for any header link (incl. Dashboard on the right) */
.navbar a.cta{
  color: #00c3ff;
  font-weight: bold;
}

/* Header content frame: same width rhythm as hero */
.nav-frame{
  width: min(1200px, 92vw);
  margin-inline: auto;
  position: relative;
}
@media (min-width: 1400px){
  .nav-frame{ width: min(1380px, 90vw); }
}
@media (min-width: 1800px){
  .nav-frame{ width: min(1500px, 84vw); }
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}
.hero-title {
  font-size: 6rem;
  color: #00c3ff;
  text-shadow: 0 0 25px #00c3ff88;
  letter-spacing: 12px;
  margin-bottom: 0.5rem;
}
.hero-subtext {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  color: #ccd6f6;
}
.button-glow {
  padding: 15px 35px;
  font-size: 1.1rem;
  border: none;
  border-radius: 40px;
  background: #007aff;
  color: white;
  text-decoration: none;
  box-shadow: 0 0 20px #007aff88;
  transition: 0.3s ease;
}
.button-glow:hover {
  background: #005fe0;
  box-shadow: 0 0 30px #00aaff;
}

.live-support-btn {
  padding: 8px 14px;
  background-color: #3ab4f2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 10px #3ab4f2aa;
  transition: 0.3s ease;
}
.live-support-btn:hover {
  background-color: #289cd6;
  box-shadow: 0 0 16px #3ab4f2;
}

.features {
  padding: 80px 20px;
  text-align: center;
  background: #111528;
}
.features h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 0 10px;
}
.feature-card {
  background: #1c1f36;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #2f3250;
}
.feature-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

#typing {
  font-style: italic;
  opacity: 0.7;
  margin: 10px 0;
}

footer {
  text-align: center;
  padding: 1.5rem;
  background: #0a0f2c;
  font-size: 0.9rem;
}

.email-input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-top: 8px;
  width: 65%;
}

.email-submit {
  background-color: #3ab4f2;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 8px;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
}

/* Reserve space under the fixed header on phones only */
@media (max-width: 768px) {
  :root { --header-tweak: -50px; } /* adjust here */

  @supports (padding: max(0px)) {
    body { padding-top: calc(var(--header-h, 0px) + env(safe-area-inset-top) + var(--header-tweak, 0px)); }
  }
  @supports not (padding: max(0px)) {
    body { padding-top: calc(var(--header-h, 0px) + var(--header-tweak, 0px)); }
  }

  [id] { scroll-margin-top: calc(var(--header-h, 0px) + 12px + var(--header-tweak, 0px)); }
}

/* add to style.css, or inject once via <style> */
.olga-feed {
  overflow-y: auto;
  max-height: 420px;     /* or whatever your chat body height is */
  padding: 8px 0;
}

.live-support-bubble .email-input:disabled,
.live-support-bubble .email-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.live-support-success {
  opacity: 0.9; /* subtle cue it's done */
}

/* Single source of truth: make Olga bot bubbles and live-support bubble identical */
.olga-bubble.olga-bot,
.live-support-bubble {
  margin-left: 11px !important;   /* left indent (tweak by 1px if needed) */
  margin-right: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;

  padding: 10px 12px !important;
  border-radius: 14px !important;
  max-width: 80% !important;
  align-self: flex-start !important;
  box-sizing: border-box;
  border: 0 !important;           /* normalize if one had a border */
}

/* Ensure the inner box doesn’t add extra offset */
.live-support-bubble .live-support-box {
  margin: 0 !important;
  padding: 0 !important;  /* the bubble already has padding */
}

/* Reduce spacing when a live-support bubble follows another bot bubble */
.olga-bubble.olga-bot + .live-support-bubble {
  margin-top: 2px !important;    /* remove most of the gap */
}

/* Also remove extra bottom margin from the Olga bubble before it */
.olga-bubble.olga-bot:has(+ .live-support-bubble) {
  margin-bottom: 2px !important;
}

.dt-note a:link,
.dt-note a:visited {
  color: inherit;   /* keeps same color, no purple */
}

.dt-note a:hover {
  color: #3ab4f2;   /* optional: brand blue hover */
}

/* --- Olga booking modal --- */
.olga-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:9998}
.olga-modal{position:fixed;inset:0;display:none;z-index:9999;align-items:center;justify-content:center}
.olga-modal > div{background:#111827;border:1px solid #2a2f3a;border-radius:14px;padding:16px;max-width:380px;width:92%}
.olga-modal h3{margin:0 0 8px;font-size:16px}
.olga-modal label{display:block;margin:8px 0 4px;font-size:12px}
.olga-modal input,.olga-modal select,.olga-modal textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #374151;background:#0f172a;color:#e5e7eb}
.olga-modal .row{display:flex;gap:8px}
.olga-modal .row > *{flex:1}
.olga-modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.olga-modal button{padding:8px 12px;border-radius:10px;border:1px solid #374151;background:#1f2937;color:#e5e7eb;cursor:pointer}
.olga-modal button.primary{background:#2563eb;border-color:#2563eb}

#noAccessCard { padding:16px 18px; }
#noAccessCard .ob-sub { color:#9fb3c8; }
#noAccessCard .ob-list { 
  margin: 0 0 6px 1.1rem; 
  line-height: 1.55;
}
#noAccessCard .ob-list li { margin: 6px 0; }
#noAccessCard .ob-list strong { color:#fff; }
.hero {
  margin-bottom: 95px; /* adjust px to taste */
}
:root{
  /* adjust if your exact blue differs */
  --olga-blue: #2ecbff;
}

/* Brand link alignment */
.navbar .logo{
  display:inline-flex;
  align-items:center;
  gap:0px;                 /* slightly tighter than 10px */
  text-decoration:none;
}

/* Bigger icon, clipped round, aligned to cap height */
.navbar .logo .brand-icon{
  height:1.35em;
  width:auto;
  display:block;
  border-radius:50%;
  object-fit:cover;
  transform:translateY(-1px); /* raise 1px */
}

/* Keep brand blue and tighten letter spacing */
.navbar .logo .brand-text{
  color:var(--olga-blue);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;           /* trims vertical slack */
  display:inline-block;    /* gives precise baseline control */
  /*margin-left:-2px;  */     /* nudge text toward the icon */
}

/* Don’t override brand color on hover */
.navbar .logo:hover .brand-text,
.navbar .logo:focus .brand-text{
  color:var(--olga-blue);
  opacity:.95;
}

/* ===== Footer (3-column) ===== */
.site-footer{
  background:#0f172a; color:#94a3b8; text-align:initial;
  border-top:1px solid rgba(255,255,255,.06);
  position: relative;                 /* new: sit above fixed bg layers */
  z-index: 1;                         /* new: prevents bleed-through on index */
}

.site-footer .foot-wrap{
  width:min(1200px,92vw); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:10px; padding:12px 0; /* thinner */
}

.site-footer .foot-left{ display:flex; gap:10px; align-items:center; }
.site-footer .foot-center{ text-align:center; color:#cbd5e1; font-size:.95rem; }
.site-footer .foot-right{ display:flex; gap:14px; justify-content:flex-end; }
@media (min-width: 768px){
  /* create safe space for the floating Olga button on the right */
  .site-footer .foot-right{ padding-right: 96px; } /* tweak 84–112px if needed */
}

.site-footer .foot-right .foot-link{
  color:#cde9ff; text-decoration:underline; text-underline-offset:3px;
}

.site-footer .social{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9999px;          /* smaller icons */
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
}

.site-footer .social:hover{ background:rgba(255,255,255,.12); }

.site-footer .social svg{ width:16px; height:16px; fill:#d3e7ff; }

/* Legal page readability */
.legal-main{ max-width:980px; margin:120px auto 80px; padding:0 18px; }
.legal-nav{ margin:8px 0 18px; opacity:.9; }
.legal-nav a{ color:#cde9ff; text-decoration:underline; text-underline-offset:3px; }
.legal-main section{
  background:rgba(255,255,255,.03); border:1px solid #243148;
  border-radius:12px; padding:16px 18px; margin:16px 0;
}
.legal-main h1{ font-size:clamp(28px,3.2vw,36px); letter-spacing:-.01em; margin:0 0 6px; color:#e6f0ff; }
.legal-main h2{ font-size:clamp(18px,2.4vw,22px); margin:0 0 8px; color:#e6f0ff; }
.legal-back{ margin:16px 0 24px; }

/* Utility: pill button used on legal pages */
.dt-btn{ display:inline-block; padding:10px 16px; border-radius:9999px;
  background:#3ab4f2; color:#001019; text-decoration:none; font-weight:700; }
.dt-btn:hover{ filter:brightness(1.06); }

/* Footer mobile stack */
@media (max-width: 700px){
  .site-footer .foot-wrap{ grid-template-columns:1fr; text-align:center; }
  .site-footer .foot-left{ justify-content:center; }
  .site-footer .foot-right{ justify-content:center; }
  .site-footer .foot-center{ order:-1; }
}

.cookie-banner{position:fixed;z-index:9999;left:16px;right:16px;bottom:16px;max-width:780px;margin:0 auto;background:rgba(15,23,42,.98);color:#cbd5e1;border:1px solid #26324a;border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none}
.cookie-banner.show{display:block}
.cookie-banner .cb-wrap{display:flex;gap:14px;align-items:center}
.cookie-banner .cb-text{font-size:.93rem;line-height:1.35;flex:1}
.cookie-banner .cb-actions{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:480px){
  .cookie-banner .cb-actions{ gap:8px; }
  .cookie-banner .cb-actions .cb-btn{ padding:8px 12px; } /* slightly smaller */
}

.cb-btn{border-radius:9999px;padding:9px 14px;font-weight:700;text-decoration:none;background:#253046;color:#dbeafe;border:1px solid #2f3b54;cursor:pointer}
.cb-btn:hover{filter:brightness(1.06)}
.cb-btn.primary{background:#3ab4f2;color:#001019;border-color:#3ab4f2}
/* Cookie banner tweaks */
.cookie-banner .foot-link{ 
  color:#94a3b8;               /* same grey as footer */
  text-decoration:underline; 
  text-underline-offset:3px;
}
/* Cookie mini-settings modal */
.cookie-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.cookie-modal.show{display:flex}
.cookie-modal .panel{width:min(520px,92vw);background:#0f172a;color:#cbd5e1;border:1px solid #26324a;border-radius:12px;padding:16px 18px}
.cookie-modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* ===== Cookie banner: mobile layout ===== */
@media (max-width: 520px){
  .cookie-banner{
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 12px;
  }
  .cookie-banner .cb-wrap{
    flex-direction: column;           /* text on top, buttons below */
    align-items: stretch;
    gap: 10px;
  }
  .cookie-banner .cb-text{
    flex: none;                       /* prevent squishing that causes odd wrapping */
    font-size: .95rem;
    line-height: 1.4;
  }
  .cookie-banner .cb-actions{
    margin-left: 0;
    display: grid;                    /* 3 buttons grid; Accept spans 2 columns */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .cookie-banner .cb-actions .cb-btn{
    width: 100%;
    padding: 10px 12px;
    text-align: center;
  }
  .cookie-banner .cb-actions .cb-btn.primary{
    grid-column: span 2;              /* Accept is wider and appears first */
  }
  /* If space is *really* tight, hide Customize; user can use the footer "Cookie settings" */
  @media (max-width: 360px){
    .cookie-banner .cb-actions [data-settings]{ display:none; }
    .cookie-banner .cb-actions{ grid-template-columns: 1fr 1fr; }
  }
}
/* ===== Cookies page polish ===== */
.legal-main { width:min(900px,92vw); margin:40px auto; }
.legal-main h1 { margin:6px 0 12px; font-size:clamp(2rem,4vw,2.6rem); }
.legal-main .legal-nav a { color:#94a3b8; text-decoration:underline; text-underline-offset:3px; }

.cookie-card{
  background:rgba(255,255,255,.03);
  border:1px solid #243148;
  border-radius:12px;
  padding:16px 18px;
  margin:16px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 8px; }
.cookie-status{ opacity:.8; margin-top:6px; }

.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px 14px;
  align-items:baseline;
}
.kv > div{ display: contents; }                /* make <span> and <code> become grid items */
.kv span{ color:#e6f0ff; }
.kv code{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:2px 8px;
  border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
  opacity:.9;
}
@media (max-width:640px){ .kv{ grid-template-columns:1fr; } }