/* ==========================================================================
   Rivergate Dental - module demo stylesheet

   The same identity as the Rivergate sample site: calm and clinical, a cool
   near-white ground, one deep sage accent, humanist sans in sentence case,
   soft radii and generous leading. Restated rather than linked, for the same
   reason as the Northline demo. The demo kit takes its colours from the
   --k-* properties set below; buttons are pills and cards are 18px, as on
   the sample.

   Type is self-hosted from /assets. Theme is locked light, as the sample's
   is. Contrast: ink on paper 14.8:1, muted on white 5.4:1, white on sage
   6.2:1.
   ========================================================================== */

@font-face{ font-family: "Figtree"; src: url("/assets/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face{ font-family: "Source Sans 3"; src: url("/assets/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root{
  --paper: #F5F7F4;
  --surface: #FFFFFF;
  --surface-2: #ECF1EC;
  --wash: #E4EEE8;
  --line: #DCE3DD;
  --line-strong: #C3CEC6;
  --ink: #17251F;
  --body-ink: #42514A;
  --muted: #5E6D65;
  --sage: #2F6B55;
  --sage-deep: #245442;

  --display: "Figtree", system-ui, -apple-system, sans-serif;
  --text: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --r: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --wrap: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --shadow: 0 1px 2px rgba(23, 37, 31, .04), 0 12px 28px -18px rgba(23, 37, 31, .28);

  --k-font: var(--text);
  --k-ink: var(--ink);
  --k-muted: var(--muted);
  --k-bg: var(--paper);
  --k-surface: var(--surface);
  --k-surface-2: var(--surface-2);
  --k-line: var(--line-strong);
  --k-accent: var(--sage);
  --k-accent-ink: #FFFFFF;
  --k-radius: var(--r);
  --k-radius-control: var(--r-pill);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--body-ink);
  font: 400 clamp(1.0625rem, 1rem + .2vw, 1.125rem)/1.75 var(--text);
  overflow-x: hidden;
}
a{ color: inherit; }
::selection{ background: var(--wash); color: var(--ink); }
:focus-visible{ outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 10;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--sage); color: #FFFFFF;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--r) 0;
  font: 600 1rem/1 var(--display);
}
.skip-link:focus{ left: 0; }

h1, h2, h3{
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

/* --- banner and masthead -------------------------------------------------- */

.demo-banner{ background: var(--wash); border-bottom: 1px solid var(--line); font-size: .9375rem; }
.demo-banner__inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-block: .75rem; }
.demo-banner p{ margin: 0; max-width: 92ch; line-height: 1.55; }
.demo-banner strong{ color: var(--ink); }
.demo-banner a{ color: var(--sage-deep); font-weight: 600; white-space: nowrap; }

.masthead{ background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead__inner{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.mark{ display: inline-flex; align-items: center; gap: .65rem; }
.mark__glyph{ width: 26px; height: 26px; border-radius: 50%; border: 6px solid var(--sage); }
.mark__name{ font: 700 1.25rem/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.masthead__cta{
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.2rem;
  border-radius: var(--r-pill); background: var(--sage); color: #FFFFFF; text-decoration: none;
  font: 600 .95rem/1 var(--display);
  transition: background-color .15s ease;
}
.masthead__cta:hover{ background: var(--sage-deep); }

/* --- intro ----------------------------------------------------------------- */

.intro{ padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.intro h1{ font-size: clamp(2.1rem, 1.3rem + 3.8vw, 4.4rem); max-width: 22ch; }
.intro__lede{ margin: 1.25rem 0 0; max-width: 50ch; color: var(--muted); font-size: clamp(1.1rem, 1.02rem + .3vw, 1.25rem); }
.intro__jump{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.intro__jump a{
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.15rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface);
  font: 600 .95rem/1 var(--display); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.intro__jump a:hover{ border-color: var(--sage); background: var(--wash); }

/* --- the modules, in this identity --------------------------------------- */

.k-module + .k-module{ border-top: 1px solid var(--line); }
.k-module__head h2{ font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }
.k-tab,
.k-control{ font-family: var(--display); font-weight: 600; }
.k-chat__window,
.k-staff__window{ box-shadow: var(--shadow); border-color: var(--line); }
.k-chat__head,
.k-staff__head{ font-family: var(--display); }
.k-caption{ font-family: var(--display); font-weight: 600; }

/* --- closing and footer ---------------------------------------------------- */

.closing{ background: var(--sage); color: #FFFFFF; }
.closing__inner{ display: grid; gap: 1.1rem; justify-items: start; padding-block: clamp(3.5rem, 7vw, 6rem); }
.closing h2{ color: #FFFFFF; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); max-width: 20ch; }
.closing p{ margin: 0; max-width: 52ch; color: #E4EEE8; }
.closing__cta{
  display: inline-flex; align-items: center; min-height: 48px; padding: .75rem 1.5rem;
  border-radius: var(--r-pill); background: #FFFFFF; color: var(--sage-deep); text-decoration: none;
  font: 700 1rem/1 var(--display);
  transition: background-color .15s ease, transform .1s ease;
}
.closing__cta:hover{ background: var(--wash); }
.closing__cta:active{ transform: translateY(1px); }
.closing :focus-visible{ outline-color: #FFFFFF; }

.foot{ background: var(--surface); border-top: 1px solid var(--line); }
.foot__inner{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; padding-block: 2rem 2.5rem; font-size: .9375rem; color: var(--muted); }
.foot p{ margin: 0; max-width: 84ch; line-height: 1.6; }
.foot a{ color: var(--sage-deep); font-weight: 600; }

@media (max-width: 767px){
  .mark__name{ font-size: 1.1rem; }
  .masthead__cta{ font-size: .85rem; padding: .5rem .9rem; }
}