/* The Sycamore Healthworks wordmark, built in HTML and CSS as on the live website (site.css .brand):
   "Sycamore" in Manrope bold, an emerald dot after it, and "Healthworks" in widely tracked capitals
   underneath. Everything is in em of the name size, so one font-size sets the whole mark: header
   1.5rem (as in the website's navigation), sign-in 2.5rem. The row stretches to the width of the wider
   line and spreads its two items, which puts the dot at the far right when "Healthworks" is wider.
   Shared by the SPA (through styles.css) and the holding page (copied into site.css at build), so the
   colours fall back to the brand values when the token custom properties are absent. */

.sy-wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-sans, 'Manrope Variable', 'Manrope', system-ui, sans-serif);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--brand-name, #111827);
  text-decoration: none;
}
.sy-wordmark--signin {
  font-size: 2.5rem;
}
.sy-wordmark--on-dark {
  --brand-name: var(--bar-text, #f9fafb);
  --brand-sub: var(--bar-brand-sub, #34d399);
}
.sy-wordmark__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3em;
}
.sy-wordmark__name {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-name, #111827);
}
.sy-wordmark__dot {
  flex: none;
  display: inline-block;
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  background: var(--brand-dot, #10b981);
  transform: translateY(-0.083em);
}
/* Green text on white is never the bright emerald: the sub line uses emerald-ink #047857 (5.48 to 1). */
.sy-wordmark__sub {
  margin-top: 0.42em;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brand-sub, #047857);
}
@media (forced-colors: active) {
  .sy-wordmark__dot {
    background: CanvasText;
  }
}

/* Holding page at "/": the Sycamore Healthworks brand (Manrope, ink and emerald, as on the live website),
   kept calm and plain: the wordmark, one paragraph, a sign-in link and the company's address.
   No scripts: the page is served with a CSP that allows none. The build step puts the shared wordmark
   rules (packages/ui/src/wordmark.css) in front of this file. */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-ext-wght.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --ink: #111827;
  --body: #1f2937;
  --quiet: #374151;
  --link: #047857;
  --link-hover: #065f46;
  --brand-name: #111827;
  --brand-sub: #047857;
  --brand-dot: #10b981;
  --glow: rgba(16, 185, 129, 0.07);
  --font-sans: 'Manrope Variable', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e13;
    --ink: #f3f4f6;
    --body: #e5e7eb;
    --quiet: #d1d5db;
    --link: #34d399;
    --link-hover: #a7f3d0;
    --brand-name: #f9fafb;
    --brand-sub: #34d399;
    --glow: rgba(16, 185, 129, 0.09);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 85% 0%, var(--glow) 0%, transparent 55%), var(--bg);
  background-attachment: fixed;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}
.top__mark {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.top__mark .sy-wordmark {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}
.top__signin {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.25rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.main {
  flex: 1;
  padding: clamp(2.5rem, 14vh, 9rem) 0 clamp(3rem, 10vh, 6rem);
}
/* The address may break after the @ on a phone only; on wider screens it stays whole. */
@media (min-width: 720px) {
  .lede a {
    white-space: nowrap;
  }
  .lede wbr {
    display: none;
  }
}
.lede {
  margin: 0;
  max-width: 38rem;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
  }
  .top__signin:hover {
    color: var(--ink);
  }
}
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.top__mark a {
  text-decoration: none;
}

.foot {
  padding: 1.5rem 0 2rem;
}
.foot p {
  margin: 0;
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.6;
}