/* Lische Dynamics
   Company identity sampled from the logo: #060F14, #D82721, #F8F7F5.
   Rouge values quoted from the app's src/design/tokens.ts, unmodified.
   No webfonts. Nothing loads from a third party. */

:root {
  color-scheme: light;
  --ground: #FFFFFF;
  --ink: #060F14;
  --ink-2: #4A555C;
  --red: #D82721;
  --rule: #E8E8E6;

  --font-co: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-rouge: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #060F14;
    --ink: #F8F7F5;
    --ink-2: #A8B4BA;
    --red: #F2645A;
    --rule: #1E2A31;
  }
}

/* Rouge pages stay light in both themes: Blush Bold has no dark variant
   and the app does not have dark mode either. */
body.rouge {
  color-scheme: light;
  --ground: #FFFFFF;
  --ink: #3D2233;
  --ink-2: #4A3040;
  --red: #C2477F;
  --rule: #EEE6E8;
  font-family: var(--font-rouge);
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over any class also on the element
   (e.g. .hero's display: flex) -- author-origin rules otherwise beat
   the user-agent [hidden] rule regardless of specificity. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-co);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

/* masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.logo img { height: 34px; width: auto; display: block; }
.logo .on-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .logo .on-light { display: none; }
  .logo .on-dark { display: block; }
}

/* Rouge pages are always light, so they always use the light lockup. */
body.rouge .logo .on-light { display: block; }
body.rouge .logo .on-dark { display: none; }

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--ink); }

/* type */

h1 {
  font-size: clamp(2rem, 5.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
  max-width: 20ch;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; max-width: var(--measure); }

.lede { font-size: 1.0625rem; color: var(--ink-2); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: 0.35;
}

/* layout */

.hero { display: flex; flex-direction: column; gap: 1.125rem; padding: 3.5rem 0; }

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 0.625rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
}

.card h2 { font-size: 1.125rem; }
.card p { font-size: 0.9375rem; color: var(--ink-2); }

/* The only place company red and Rouge pink appear on one page. They are
   close enough in hue to look accidental if placed adjacent, so the stripe
   is the product's colour and everything around it stays company chrome. */
.card-stripe { height: 3px; width: 2.5rem; border-radius: 2px; }

/* links */

.lnk {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lnk:hover { background: var(--red); color: var(--ground); }
.lnk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* lists */

.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.checklist li { display: flex; gap: 0.625rem; align-items: flex-start; max-width: var(--measure); }
.checklist svg { flex: 0 0 auto; margin-top: 0.375rem; }

/* footer */

.foot {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.foot a { color: var(--ink-2); }

/* long-form legal pages */

.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose ul { padding-left: 1.25rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.625rem 0.75rem 0.625rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}