/* ============================================================
   Medicus Design System  ·  medicus.css
   The single source of truth for the redesign and for any
   Medicus public microsite (docs, trust centre, etc).
   No build step, no framework — plain CSS custom properties
   plus a small set of component classes.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------ */
:root {
  /* Brand colour — deep navy is primary */
  --ink:            #091c39;  /* darkest blue · primary */
  --ink-2:          #263851;  /* darker blue · hover / dark surfaces */
  --accent:         #315B8A;  /* accent blue */
  --accent-2:       #3D73AF;  /* lighter blue · links, eyebrows */

  /* Neutrals */
  --text:           #212121;
  --text-light:     #5b616b;
  --text-lightest:  #727780;
  --grey-700:       #46556a;
  --grey-400:       #9fa6b2;
  --grey-200:       #cbcfd5;
  --grey-100:       #e5e7eb;
  --border:         #dadde1;
  --border-soft:    #e5e7eb;

  /* Surfaces */
  --bg:             #f4f5f7;  /* page background */
  --surface:        #ffffff;
  --tint:           #EBF1F8;  /* pale accent tint · chips, soft bands */
  --tint-2:         #DCE7F4;  /* slightly deeper tint · image stages */

  /* "Pop" accents — use sparingly, never as large fills */
  --pop-coral:      #E16E7C;
  --pop-green:      #6EBA90;
  --pop-blue:       #3D73AF;

  /* On-dark text */
  --on-dark:        #dbe4ef;
  --on-dark-soft:   #9DB4CC;

  /* Type */
  --font-display: Georgia, 'Times New Roman', serif;  /* headlines */
  --font-body:    Arial, Helvetica, sans-serif;       /* everything else */

  /* Radius */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows (navy-tinted) */
  --shadow-sm:   0 4px 14px -8px rgba(9,28,57,.20);
  --shadow-card: 0 24px 48px -30px rgba(9,28,57,.30);
  --shadow-img:  0 24px 50px -30px rgba(9,28,57,.22);
  --shadow-pop:  0 16px 30px -14px rgba(9,28,57,.45);

  /* Layout */
  --container: 1180px;
  --gutter: 32px;
}

/* ---- 2. Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---- 3. Layout helpers ----------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: 90px 0; }
.section--sm { padding: 64px 0; }
.section--tint { background: var(--tint); border-top: 1px solid #dde4ee; }
.section--white { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.center { text-align: center; }
.measure { max-width: 760px; }
.measure-narrow { max-width: 640px; }

/* ---- 4. Typography --------------------------------------- */
.eyebrow {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--accent-2); margin: 0 0 16px;
}
.section--dark .eyebrow { color: #7FA8D6; }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; color: var(--ink); margin: 0; line-height: 1.1; }
.display--xl { font-size: 64px; line-height: 1.04; letter-spacing: -.02em; }
.h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.04; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: 43px; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: 31px; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.section--dark .h1, .section--dark .h2, .section--dark .h3 { color: #fff; }
.lead { font-size: 19px; line-height: 1.62; color: var(--text-light); margin: 0; }
.body { font-size: 17px; line-height: 1.6; color: var(--text-light); margin: 0; }
.muted { color: var(--text-light); }
.balance { text-wrap: balance; }

/* ---- 5. Buttons ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  padding: 16px 30px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); }
.btn--primary:hover { background: var(--ink-2); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--tint); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); padding: 10px 20px; font-size: 16px; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: 13px 24px; font-size: 16px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-weight: 600; }

/* ---- 6. Header / nav ------------------------------------- */
.announce { background: var(--ink); color: #cdd8e6; font-size: 14.5px; }
.announce__row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; padding: 11px var(--gutter); }
.announce a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(244,245,247,.86); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.site-logo { display: block; height: 26px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-link { padding: 9px 14px; font-weight: 500; border-radius: 9px; }
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--tint); color: var(--ink); }
.nav-dropdown { position: relative; }
.nav-trigger { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-weight: 500; border-radius: 9px; background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; }
.nav-trigger:hover { background: var(--tint); }
.dropdown-menu { position: absolute; top: 100%; left: 0; width: 280px; padding-top: 10px; display: none; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 18px 40px -18px rgba(9,28,57,.28); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dropdown-card a { padding: 11px 13px; border-radius: 9px; }
.dropdown-card a:hover { background: var(--tint); }
.dropdown-card strong { display: block; font-weight: 600; }
.dropdown-card span { font-size: 13.5px; color: var(--text-lightest); }

/* ---- 7. Hero --------------------------------------------- */
.hero__grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 64px; align-items: center; padding-top: 84px; padding-bottom: 64px; }
.hero__media { position: relative; }
.glow { position: absolute; inset: -30px -20px; z-index: 0; border-radius: 30px;
  background: radial-gradient(120% 100% at 70% 30%, var(--tint-2) 0%, rgba(220,231,244,0) 70%); }

/* Clean image "stage" — the screenshot's own framing does the work */
.media-frame { position: relative; z-index: 1; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-img); }
.media-frame img { display: block; width: 100%; height: auto; }

/* ---- 8. Trust strip -------------------------------------- */
.trust__label { text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-lightest); margin: 0 0 26px; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }
.logo-tile { height: 62px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.logo-tile img { max-height: 42px; max-width: 80%; object-fit: contain; }

/* ---- 9. Cards & grids ------------------------------------ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.card--hover { transition: border-color .18s ease, box-shadow .18s ease; }
.card--hover:hover { border-color: #C2D2E6; box-shadow: var(--shadow-card); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 0; color: var(--ink); }
.card h4 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.card p { margin: 0; }

/* Icon "spot" — soft gradient blob holding a line icon (the 1c style) */
.icon-spot { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: radial-gradient(120% 120% at 30% 20%, #E3ECF7, #CBDBEC); }
.icon-spot--lg { width: 64px; height: 64px; border-radius: 18px; }
.icon-spot--green { background: radial-gradient(120% 120% at 30% 20%, #DDEEE5, #C2E2CF); }
.icon-spot--coral { background: radial-gradient(120% 120% at 30% 20%, #F6E0E4, #EFC8CF); }
.icon-spot svg { display: block; }

/* ---- 10. Feature rows ------------------------------------ */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 52px 0; }
.feature-row--reverse .feature-row__media { order: -1; }
.plus-list { display: flex; flex-direction: column; gap: 18px; }
.plus-item { display: flex; gap: 14px; align-items: flex-start; }
.plus-mark { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--tint); border: 1px solid #C9D8E8; color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; margin-top: 2px; }
.plus-item h4 { margin: 0 0 4px; font-size: 17.5px; font-weight: 700; color: var(--ink); }
.plus-item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-light); }

/* ---- 11. Testimonials ------------------------------------ */
.quote-card { margin: 0; background: var(--ink); color: var(--on-dark); border-radius: var(--r-xl); padding: 44px 42px; display: flex; flex-direction: column; gap: 26px; }
.quote-card__mark { font-family: var(--font-display); font-size: 54px; line-height: .6; color: var(--pop-green); height: 24px; }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.36; color: #fff; }
.quote-card figcaption { margin-top: auto; }
.quote-card__name { font-weight: 600; color: #fff; }
.quote-card__role { font-size: 15px; color: var(--on-dark-soft); }

/* ---- 12. FAQ accordion ----------------------------------- */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font: inherit; color: var(--ink); }
.faq-q span:first-child { font-size: 18.5px; font-weight: 600; line-height: 1.4; }
.faq-chevron { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .25s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 26px 26px; font-size: 16.5px; line-height: 1.65; color: var(--text-light); display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-a strong { color: var(--ink); }

/* ---- 13. Compliance badges ------------------------------- */
.badge-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.badge-tile { background: #fff; border-radius: 10px; padding: 10px; width: 132px; height: 66px; display: flex; align-items: center; justify-content: center; }
.badge-tile img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; margin: auto; }
.badge-card h4 { margin: 0; font-size: 16.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.badge-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft); }

/* ---- 14. CTA band ---------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; background: var(--ink); color: #fff; padding: 84px 48px; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% -10%, rgba(61,115,175,.5) 0%, rgba(61,115,175,0) 60%); }
.cta-band > * { position: relative; }
.cta-band .h2 { margin: 0 auto 30px; max-width: 20em; }

/* ---- 15. Footer ------------------------------------------ */
.site-footer { background: #07182f; color: #9fb0c4; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding: 64px var(--gutter) 40px; max-width: var(--container); margin: 0 auto; }
.site-footer__logo { display: block; height: 28px; width: auto; margin-bottom: 18px; }
.site-footer address { margin: 0; font-style: normal; font-size: 15px; line-height: 1.7; color: #6b7d92; }
.site-footer__col { display: flex; flex-direction: column; gap: 13px; font-size: 15px; }
.site-footer__col a:hover { color: #fff; }
.site-footer__bar { border-top: 1px solid #1b2c44; }
.site-footer__bar-row { max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: #6b7d92; }
.site-footer__bar a:hover { color: #fff; }

/* ---- 16. Responsive -------------------------------------- */
@media (max-width: 960px) {
  .hero__grid, .feature-row { grid-template-columns: 1fr; gap: 40px; }
  .feature-row--reverse .feature-row__media { order: 0; }
  .grid-3, .grid-4, .trust__grid, .site-footer__top { grid-template-columns: repeat(2, 1fr); }
  .h1, .display--xl { font-size: 46px; }
  .h2 { font-size: 34px; }
  .site-nav { gap: 2px; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4, .trust__grid, .site-footer__top { grid-template-columns: 1fr; }
  .h1, .display--xl { font-size: 38px; }
}

/* ---- 17. Prose (legal / announcement) — site addition ---- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h1 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -.015em; color: var(--ink); margin: 0 0 .3em; }
.prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--ink); margin: 1.6em 0 .4em; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin: 1.3em 0 .3em; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; color: var(--text); }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--accent-2); text-decoration: underline; }
.prose table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15.5px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); }
.prose .crumb { color: var(--text-lightest); font-size: 14px; margin: 0 0 18px; }
.prose .crumb a { color: var(--accent-2); }
.prose .lead { margin-bottom: 1.4em; }
.prose img { border-radius: var(--r); box-shadow: var(--shadow-img); margin: 10px 0 26px; }
.pullquote { border-left: 3px solid var(--accent-2); padding: 6px 0 6px 24px; margin: 28px 0; font-family: var(--font-display); font-size: 24px; font-style: italic; color: var(--ink); }
.quote-attr { color: var(--text-light); }

/* ---- 18. Checklist + integration categories — site addition ---- */
.checklist { columns: 2; column-gap: 40px; max-width: 820px; margin: 22px auto 0; list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; break-inside: avoid; color: var(--text); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--pop-green); font-weight: 700; }
.int-cat { margin-top: 44px; }
.int-cat h3 { font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-2); margin: 0 0 16px; }
.int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width:960px){ .int-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .checklist { columns: 1; } .int-grid { grid-template-columns: 1fr; } }


/* ---- Mobile navigation (hamburger) ---------------------- */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .site-header__row { position: relative; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin: -8px 0; background: transparent;
    border: 0; color: var(--ink); cursor: pointer; border-radius: 10px; }
  .nav-toggle:hover { background: var(--tint); }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--gutter) 20px; background: var(--surface);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-link, .site-nav .nav-trigger { width: 100%; padding: 12px; font-size: 17px; border-radius: 10px; }
  .nav-dropdown { position: static; }
  .dropdown-menu { position: static; display: block; width: auto; padding: 2px 0 6px 6px; }
  .dropdown-card { box-shadow: none; border: 0; background: transparent; padding: 0; }
  .site-nav .btn--outline { margin-top: 8px; justify-content: center; }
}