:root {
      /* Core palette (trustworthy) */
      --primary-600: #1E3A8A; /* Navy Blue */
      --primary-700: #1E293B; /* Deep Navy */
      --secondary-600: #B45309; /* Golden Brass */
      --accent-500: #7F1D1D;  /* Burgundy */

      /* Neutrals */
      --ink: #0F172A; /* text */
      --muted: #475569; /* muted text */
      --border: #CBD5E1; /* lines */
      --cloud: #F8FAFC; /* page bg */
      --card: #FFFFFF; /* surfaces */

      --radius: 14px;
      --shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
    }

    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--cloud); color: var(--ink); font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
    .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

    /* Header / Nav */
    header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--primary-700); }
    .brand .word { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 20px; }
    .logo svg { width: 32px; height: 32px; display: block; }

    .menu { display: flex; gap: 20px; align-items: center; }
    .menu a { color: var(--primary-700); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
    .menu a:hover { background: #EEF2FF; }
    .hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }

    @media (max-width: 880px) {
      .menu { display: none; position: absolute; top: 64px; right: 0; left: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 20px; }
      .menu.open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .hamburger { display: inline-flex; }
    }

    /* Hero */
    .hero {
      /* Calm base gradient */
      --noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.03 0"/></filter><rect width="60" height="60" filter="url(%23n)"/></svg>');
      --circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360"><circle cx="300" cy="60" r="140" fill="%231E3A8A" fill-opacity="0.08"/></svg>');
      background:
        var(--circle) right -80px top -80px / 360px 360px no-repeat,
        var(--noise) center / 300px 300px repeat,
        linear-gradient(180deg, rgba(30,58,138,0.05) 0%, rgba(248,250,252,1) 100%);
    }
    .headline { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(32px, 6vw, 56px); margin: 0 0 10px; color: var(--primary-700); }
    .subhead { color: var(--muted); max-width: 720px; margin: 0 0 24px; }
    .actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid transparent; }
    .btn.primary { background: var(--primary-600); color: #fff; box-shadow: 0 6px 16px rgba(30,58,138,0.25); }
    .btn.primary:hover { background: var(--primary-700); }
    .btn.secondary { background: var(--secondary-600); color: #fff; box-shadow: 0 6px 16px rgba(180,83,9,0.25); }
    .btn.ghost { background: transparent; color: var(--primary-700); border-color: var(--border); }

    .hero-card { margin-top: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hero-item { padding: 12px; border: 1px dashed var(--border); border-radius: 12px; }
    @media (max-width: 800px) { .hero-card { grid-template-columns: 1fr; } }

    /* Sections */
    section { padding: 32px 0 24px; /* less top/bottom space */ }
    .section-title { font-family: "Space Grotesk", Inter, sans-serif; font-size: 28px; font-weight: 700; color: var(--primary-700); margin: 0 0 10px; }
    .section-lead { color: var(--muted); margin: 0 0 24px; }

    /* Backgrounds */
    /* Hero: calm gradient retained */
    .hero {
      background: linear-gradient(180deg, rgba(30,58,138,0.05) 0%, rgba(248,250,252,1) 100%);
    }

    /* Features: top banner illustration (centered), no text shift */
    .features { position: relative; background: linear-gradient(180deg, rgba(180,83,9,0.02) 0%, rgba(248,250,252,1) 100%); }
    .features::before { content: none; }

    /* Why Us: top banner motif (shield + pillars), no text shift */
    .whysec { position: relative; background: linear-gradient(180deg, rgba(127,29,29,0.02) 0%, rgba(248,250,252,1) 100%); }
    .whysec::before { content: none; }

    /* About: soft brass bands */
    .aboutsec {
      background:
        radial-gradient(800px 300px at 80% -10%, rgba(180,83,9,0.10), transparent 60%),
        repeating-linear-gradient(-45deg, rgba(180,83,9,0.07) 0 12px, transparent 12px 32px);
    }

    /* removed banner-specific media queries */
      .features::before { height: 160px; }
      .whysec { padding-top: 220px; }
      .whysec::before { height: 180px; }
    }

    /* removed banner-specific media queries */
      .features::before { height: 120px; }
      .whysec { padding-top: 180px; }
      .whysec::before { height: 140px; }
    }

    /* Features */
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;  }
    @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
    @media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
    .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .card h3 { margin: 6px 0 8px; font-size: 18px; font-weight: 700; color: var(--primary-700); font-family: "Space Grotesk", Inter, sans-serif; }
    .pill {
    display: inline-block; padding: 4px 8px; border-radius: 999px; font-weight: 600; font-size: 11px; 
    color: var(--primary-700);
    background: rgba(30,41,59,0.06);
    border: 1px solid var(--border);
    box-shadow: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

    /* Why Us */
    .why { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
    .why ul { margin: 0; padding-left: 20px; }
    .why li { margin-bottom: 10px; }
    @media (max-width: 900px) { .why { grid-template-columns: 1fr; } }

    .quote { background: linear-gradient(140deg, rgba(127,29,29,0.08), rgba(30,41,59,0.06)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
    .quote strong { color: var(--accent-500); }

    /* About */
    .about { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .about .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
    .about .stat .num { font-weight: 800; font-size: 28px; color: var(--primary-700); font-family: "Space Grotesk"; }

    /* Footer */
    footer { padding: 36px 0 60px; border-top: 1px solid var(--border); color: var(--muted); }

    /* Anchor offsets (for sticky header) */
    .anchor { position: relative; top: -80px; visibility: hidden; }
    /* Icons */
    .card .icon { display:inline-flex; width:22px; height:22px; margin: 0 6px 0 0; vertical-align: middle; color: var(--primary-700); }
    .card h3 { display:flex; align-items:center; gap:6px; }
  /* Presence Illustrations */
    .hero { position: relative; overflow: hidden; }
    /* hero art removed */

    .features { position: relative; overflow: hidden; }
    /* features art removed; using top banner instead */

    .whysec { position: relative; overflow: hidden; }
    /* why art removed; using top banner instead */

    /* ensure content stays readable */
    .hero .container, .features .container, .whysec .container { position: relative; z-index: 1; padding-left: 20px; padding-right: 20px; }
    /* safe padding so art doesn't collide with text */
    .features .container { position: relative; z-index: 1; padding-left: 20px; padding-right: 20px; }
    .whysec .container { padding-right: min(420px, 32vw); }

    @media (max-width: 1024px) { /* reset padding overrides for mid screens */ }
      .whysec .container { padding-right: min(300px, 36vw); }
    }
    @media (max-width: 760px) { .hero-art { opacity: 0.18; width: 70vw; } }
      .features .container, .whysec .container { padding-left: 20px; padding-right: 20px; }
    }
  }

    @media (max-width: 760px) {
      .hero-art, .features-art, .why-art { opacity: 0.18; width: 70vw; }
    }  /* --- Features grid override (force 2 cols on desktop) --- */
    .features .grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 20px; align-items: stretch; }
    @media (max-width: 1024px) { .features .grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
    @media (max-width: 900px) { .features .grid { grid-template-columns: 1fr; } }


    /* Calendar */
.calendar { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title { font-weight: 800; color: var(--primary-700); font-family: "Space Grotesk", Inter, sans-serif; }
.cal-nav { display: inline-flex; gap: 6px; }
.cal-btn { border: 1px solid var(--border); background:#fff; border-radius: 10px; padding: 6px 8px; font-weight: 700; cursor: pointer; font-size: 16px; }
.cal-btn:hover { background:#FAFAFA; }


.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; color: var(--muted); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;  }
.day { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-700); background:#fff; position: relative; font-size: 13px;
} }
.day.muted { color: #94A3B8; background: #F1F5F9; }
.day.today { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.day.has-appt::after { content: ""; position: absolute; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-600); }
.day.has-appt.multi::after { width: 10px; height: 10px; background: var(--accent-500); }


/* Analytics */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.stat { border: 1px dashed var(--border); border-radius: 12px; padding: 14px; }
.stat .label { color: var(--muted); font-size: 12px; }
.stat .value { font-size: 26px; font-weight: 800; color: var(--primary-700); font-family: "Space Grotesk", Inter, sans-serif; }


/* Settings */
.settings { display: grid; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid var(--border); padding: 12px 14px; cursor: pointer; background: #fff; color: var(--ink); }
.btn:hover { background:#FAFAFA; }


/* ---- Dashboard-only calendar sizing (scoped) ---- */
.page-dashboard .grid {
  /* make calendar ~45% and right column ~55% on desktop */
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.page-dashboard .calendar {
  /* cap visual width so it never dominates */
  max-width: 480px;
}

@media (max-width: 980px) {
  .page-dashboard .grid {
    grid-template-columns: 1fr; /* stack on tablet/mobile */
  }
  .page-dashboard .calendar {
    max-width: none; /* use full width on small screens */
  }
}

/* Tighter mini-calendar UI */
.page-dashboard .cal-title { font-size: 16px; }
.page-dashboard .cal-weekdays { font-size: 11px; }
.page-dashboard .cal-grid { gap: 4px; }
.page-dashboard .day {
  border-radius: 8px;
  font-size: 13px;
}

/* ---- Dashboard layout: calendar + analytics side-by-side ---- */
.page-dashboard .top-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr; /* Calendar bigger than Analytics */
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .page-dashboard .top-row {
    grid-template-columns: 1fr; /* stack vertically on small screens */
  }
}

/* keep calendar compact */
.page-dashboard .calendar {
  max-width: 520px;
}

/* analytics stats look good at that width */
.page-dashboard #analytics .stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}


/* ---- Dashboard top row equal height layout ---- */
.page-dashboard .top-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 24px;
  align-items: stretch; /* ensure same height */
  margin-bottom: 28px;
}

/* Both cards fill available height */
.page-dashboard .top-row .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Allow calendar grid to expand naturally */
.page-dashboard .calendar {
  max-width: 520px;
  flex-grow: 1;
}

/* Analytics card padding and vertical alignment */
.page-dashboard #analytics {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Stats look tidy within fixed height */
.page-dashboard #analytics .stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .page-dashboard .top-row {
    grid-template-columns: 1fr;
  }
  .page-dashboard .top-row .card {
    height: auto;
  }
}

/* Restore spacing between top-row (calendar+analytics) and settings */
.page-dashboard .grid {
  display: grid;
  gap: 32px; /* add consistent vertical gap between stacked sections */
}

.page-dashboard .top-row {
  margin-bottom: 0; /* remove manual bottom margin; grid gap handles it now */
}

/* --- Dashboard container must be a single column --- */
.page-dashboard .grid {
  display: grid;
  grid-template-columns: 1fr !important; /* override global .grid */
  gap: 32px; /* vertical spacing between top-row and settings */
}

/* Top row: calendar + analytics side-by-side */
.page-dashboard .top-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .page-dashboard .top-row {
    grid-template-columns: 1fr; /* stack on small screens */
  }
}

/* Ensure visual spacing between top-row (Calendar+Analytics) and Settings */
.page-dashboard .top-row {
  margin-bottom: 32px; /* reintroduce clean spacing below the top section */
}

/* Optional: extra space on small screens for breathing room */
@media (max-width: 900px) {
  .page-dashboard .top-row {
    margin-bottom: 40px;
  }
}


/* Settings layout */
.settings-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:28px 0 60px}
@media (max-width: 900px){.settings-layout{grid-template-columns:1fr}}


.side{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;position:relative}
.side h2{margin:6px 10px 10px;font:700 16px/1 "Space Grotesk";color:var(--primary-700)}
.side .list{display:grid;gap:6px}
.side a{display:block;text-decoration:none;border:1px solid var(--border);background:#fff;color:var(--primary-700);padding:10px 12px;border-radius:10px;font-weight:700;position:relative}
.side a:hover{background:#FAFAFA}
/* active (server should add aria-current="page" or .active on the current section link) */
.side a[aria-current="page"], .side a.active{border-color:var(--primary-600);box-shadow:0 0 0 2px rgba(30,58,138,0.15) inset;background:#EEF2FF}
.side a[aria-current="page"]::before, .side a.active::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--accent-500)}


.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;min-height:320px}
.panel h3{margin:0 0 10px;font:700 20px/1.2 "Space Grotesk";color:var(--primary-700)}
.panel p{color:var(--muted)}