/* intramessenger.net — binding for the authoritative TypeUI clean package. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/lato-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --neutral-primary-soft: #ffffff;
  --neutral-secondary-soft: #fafbfc;
  --neutral-secondary-medium: #f2f2f5;
  --neutral-tertiary-soft: #ededf0;
  --brand-softer: #f4f0ff;
  --brand-soft: #e8deff;
  --brand: #6c47ff;
  --brand-medium: #d4c4ff;
  --brand-strong: #5535dc;
  --dark: #131316;
  --dark-strong: #0d0d12;
  --white: #ffffff;
  --heading: #131316;
  --body: #5e5f6e;
  --body-subtle: #747686;
  --fg-brand: #6c47ff;
  --fg-brand-strong: #5535dc;
  --border-default: #e8e8ec;
  --border-default-medium: #e8e8ec;
  --border-default-strong: #e8e8ec;
  --border-dark: #1f1f25;
  --color-1-400: rgb(255 255 255 / 0.15);
  --color-1-700: rgb(0 0 0 / 0.08);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --radius-base: 12px;
  --radius-default: 8px;
  --max: 1200px;
  --read: 768px;
  --spring-snappy: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%, 1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%, 1.004 59.2%, 1.001 69.3%, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-primary-soft: #111116;
    --neutral-secondary-soft: #111116;
    --neutral-secondary-medium: #1a1a21;
    --neutral-tertiary-soft: #111116;
    --brand-softer: #1a0f36;
    --brand-soft: #2d1b69;
    --brand: #7958f7;
    --brand-medium: #2d1b69;
    --brand-strong: #6c47ff;
    --dark-strong: #2c2c35;
    --heading: #f5f5f7;
    --body: #9394a1;
    --body-subtle: #9394a1;
    --fg-brand: #a78bff;
    --fg-brand-strong: #d4c4ff;
    --border-default: #686875;
    --border-default-medium: #71717e;
    --border-default-strong: #7a7a87;
    --border-dark: #71717e;
    --color-1-400: rgb(255 255 255 / 0.08);
    --color-1-700: rgb(0 0 0 / 0.15);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--neutral-primary-soft);
  color: var(--body);
  font: 400 16px/1.6 "Lato", sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a {
  color: var(--fg-brand-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration: none; }
a:focus-visible {
  outline: 4px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius-default);
}
h1, h2, h3 {
  margin: 0;
  color: var(--heading);
  font-family: "Lato", sans-serif;
  font-weight: 700;
}
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -1.2px; }
h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.5px; }
h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.3px; }
p { margin: 0 0 16px; }

.skip-link {
  position: absolute;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-default-medium);
  border-radius: var(--radius-default);
  background: var(--neutral-primary-soft);
  color: var(--heading);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 48px;
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-default);
}
.brand img { width: 280px; }
.site-header nav { display: flex; justify-content: flex-end; gap: 24px; }
.site-header nav a,
.site-footer nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header nav a:hover,
.site-footer nav a:hover { color: var(--fg-brand-strong); }
.eyebrow {
  margin-bottom: 12px;
  color: var(--fg-brand-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.3fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  width: min(calc(100% - 48px), var(--max));
  min-height: calc(100dvh - 106px);
  margin: auto;
  padding: clamp(72px, 10vh, 128px) 0;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 38% 14% -18%;
  background: radial-gradient(ellipse at center, var(--brand-softer) 0%, transparent 68%);
  pointer-events: none;
}
.hero-copy { align-self: center; }
.hero h1 {
  max-width: 9.5ch;
  font-size: clamp(64px, 7.7vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.065em;
  text-wrap: balance;
}
.lede { max-width: 70ch; font-size: 20px; line-height: 1.6; }
.hero .lede {
  max-width: 54ch;
  margin: clamp(24px, 4vh, 40px) 0 32px;
  font-size: clamp(16px, 1.35vw, 19px);
}
.hero-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-links a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--border-default-medium);
  border-radius: var(--radius-default);
  background: var(--neutral-primary-soft);
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-xs), inset var(--color-1-400) 0 6px 0 -5px, var(--color-1-700) 0 4px 10px -5px;
  transition: transform 0.45s var(--ease-snap), box-shadow 0.45s var(--ease-snap), border-color 0.3s var(--ease-snap), background-color 0.3s var(--ease-snap);
}
.hero-links a:hover {
  transform: translateY(-2px);
  border-color: var(--border-default-strong);
  background: var(--neutral-secondary-medium);
}
.hero-links a:active { transform: translateY(0) scale(0.98); }
.hero-links .primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: var(--white);
}
.hero-links .primary:hover {
  background: linear-gradient(180deg, var(--brand-strong), var(--brand-strong));
  box-shadow: var(--shadow-sm), inset var(--color-1-400) 0 6px 0 -5px, 0 4px 16px -4px rgb(108 71 255 / 0.3);
}
.feature-index {
  align-self: start;
  margin-top: clamp(112px, 20vh, 200px);
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-primary-soft);
  box-shadow: var(--shadow-xs);
}
.feature-index > p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.feature-index ol { margin: 24px 0 0; padding: 0; list-style: none; }
.feature-index li {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 16px 0;
  border-top: 1px solid var(--border-default);
  color: var(--heading);
  font-weight: 700;
  transition: transform 0.4s var(--ease-snap), color 0.4s var(--ease-snap);
}
.feature-index li:hover { transform: translateX(6px); color: var(--fg-brand-strong); }
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero-links,
.feature-index {
  animation: hero-enter 0.56s var(--spring-snappy) both;
}
.hero .eyebrow { animation-delay: 80ms; }
.hero h1 { animation-delay: 180ms; }
.hero .lede,
.feature-index { animation-delay: 300ms; }
.hero-links { animation-delay: 410ms; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.feature-index span,
.signal-row > span,
.checklist article > span {
  color: var(--fg-brand-strong);
  font-family: "Lato", sans-serif;
}

.image-run {
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto 96px;
}
.image-run figure { margin: 0; }
.image-run img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-base);
}
.image-run figure:nth-child(2) { margin: -32px 0 32px; }

.feature-band {
  padding: 96px max(24px, calc((100% - var(--max)) / 2));
  background: var(--dark);
  color: #9394a1;
}
.feature-band header { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.feature-band h2, .feature-band h3 { color: var(--white); }
.feature-band .eyebrow,
.feature-band article span { color: #d4c4ff; }
.feature-band > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 64px;
  border-top: 1px solid var(--border-dark);
}
.feature-band article {
  padding: 32px 32px 16px 0;
  border-right: 1px solid var(--border-dark);
}
.feature-band article + article { padding-left: 32px; }
.feature-band article:last-child { border-right: 0; }
.feature-band h3 { margin: 32px 0 16px; }

.signal-list, .source-reading {
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  padding: 96px 0;
}
.signal-list > header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 64px;
}
.signal-row {
  display: grid;
  grid-template-columns: 56px minmax(280px, 1.1fr) minmax(260px, 0.9fr);
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--border-default);
}
.signal-row > span { font-size: 14px; font-weight: 700; }
.signal-row > div > p {
  margin-bottom: 8px;
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.signal-row h3 a { color: var(--heading); text-decoration: none; }
.signal-row h3 a:hover { color: var(--fg-brand-strong); }
.more { margin-top: 32px; }

.breadcrumb {
  display: flex;
  gap: 16px;
  width: min(calc(100% - 48px), var(--max));
  margin: 32px auto;
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.page-intro, .guide-hero {
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  padding: 96px 0;
}
.page-intro h1, .guide-hero h1 { max-width: 1000px; }
.page-intro > p:last-child, .guide-hero > p {
  max-width: 70ch;
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.6;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 48px;
  width: min(calc(100% - 48px), var(--max));
  margin: 64px auto 96px;
}
.article-layout aside {
  padding-top: 16px;
  border-top: 2px solid var(--brand);
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.article-layout aside span { display: block; margin: 16px 0; }
.article-layout aside img {
  margin-top: 32px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-base);
}
.reading { max-width: var(--read); }
.reading header {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-default);
}
.reading .lede { margin-top: 16px; }
.prose { padding-top: 48px; font-size: 16px; line-height: 1.6; }
.prose h2 { margin: 48px 0 16px; }
.prose h3 { margin: 40px 0 16px; }
.prose p, .prose ul, .prose ol { margin: 0 0 24px; }
.prose li + li { margin-top: 8px; }
.prose img {
  margin: 40px 0;
  max-height: 620px;
  object-fit: contain;
  border-radius: var(--radius-base);
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td {
  padding: 8px;
  border: 1px solid var(--border-default);
  text-align: left;
}
.next-step {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-default);
}
.disclosure {
  display: grid;
  grid-template-columns: 184px 1fr;
  gap: 24px;
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--neutral-primary-soft);
  box-shadow: var(--shadow-xs);
}
.checklist {
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  border-top: 1px solid var(--border-default);
}
.checklist article {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border-default);
}
.checklist article > span { font-size: 16px; font-weight: 700; }
.checklist p { max-width: 68ch; margin-top: 16px; }
.source-reading h2 { margin-bottom: 48px; }

.site-footer {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 48px max(24px, calc((100% - var(--max)) / 2));
  background: var(--neutral-secondary-soft);
  border-top: 1px solid var(--border-default);
}
.footer-mark img { width: 64px; border-radius: var(--radius-base); }
.site-footer nav { display: flex; gap: 24px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 36px; }
  h3 { font-size: 30px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 60px; }
  h2 { font-size: 44px; }
  h3 { font-size: 36px; }
}
@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr; }
  .site-header nav { justify-content: flex-start; overflow: auto; }
  .hero, .feature-band header, .signal-list > header, .article-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; gap: 56px; overflow: visible; }
  .hero h1 { max-width: 10ch; font-size: clamp(58px, 12vw, 88px); }
  .feature-index { max-width: 520px; margin-top: 0; }
  .image-run { grid-template-columns: 1fr; }
  .image-run img { height: auto; aspect-ratio: 16 / 9; }
  .image-run figure:nth-child(2) { margin: 0; }
  .feature-band > div { grid-template-columns: 1fr; }
  .feature-band article, .feature-band article + article {
    padding: 32px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-dark);
  }
  .signal-row { grid-template-columns: 48px 1fr; }
  .signal-row > p { grid-column: 2; }
  .site-footer { grid-template-columns: 64px 1fr; }
  .site-footer nav { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-header, .hero, .image-run, .signal-list, .breadcrumb,
  .page-intro, .guide-hero, .article-layout, .checklist, .source-reading {
    width: calc(100% - 32px);
  }
  .brand img { width: 240px; }
  .site-header nav { gap: 16px; }
  .hero { gap: 48px; padding: 72px 0 80px; }
  .hero h1 { font-size: clamp(52px, 16.5vw, 72px); line-height: 0.88; }
  .hero .lede { margin-top: 28px; }
  .hero-links { align-items: flex-start; flex-direction: column; }
  .feature-band { padding-inline: 16px; }
  .signal-row { grid-template-columns: 32px 1fr; gap: 16px; }
  .disclosure { grid-template-columns: 1fr; }
  .site-footer { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero-links,
  .feature-index {
    animation: hero-fade 0.18s var(--ease-snap) both;
    animation-delay: 0ms;
    transform: none;
  }
  .hero-links a,
  .feature-index li { transition: none; }
  .hero-links a:hover,
  .hero-links a:active,
  .feature-index li:hover { transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}