/* "A first employee" block (partials/first-role.njk), homepage + /services.
   Tokens repeated locally because home.css and pages.css each define their
   own :root; values match docs/askeleven-design-system.md. */
.firstrole {
  --fr-ink: #24251F; --fr-mute: #72736B; --fr-hair: #E6E6DF; --fr-slate: #3D5876; --fr-paper: #F8F8F5;
  padding: 128px 0;
}
.fr-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 80px; align-items: center; }
.fr-eyebrow { font-size: 15px; font-weight: 500; color: var(--fr-mute); }
.firstrole h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 500; margin: 12px 0 18px; max-width: 18ch; text-wrap: balance; }
.fr-lede { font-size: 17px; line-height: 1.6; color: var(--fr-mute); max-width: 46ch; }

.fr-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 36px 0 0; background: var(--fr-hair); border: 1px solid var(--fr-hair); border-radius: 12px; overflow: hidden; }
.fr-scope > div { background: #fff; padding: 18px 20px; }
.fr-scope dt { font-size: 13px; color: var(--fr-mute); }
.fr-scope dd { margin: 4px 0 0; font-weight: 550; font-size: 15px; line-height: 1.4; color: var(--fr-ink); }
.fr-scope > div.kept { background: #F3F5F8; }
.fr-scope > div.kept dt { color: var(--fr-slate); font-weight: 550; }
.fr-note { margin-top: 14px; font-size: 13px; color: var(--fr-mute); }

.fr-card {
  background: #fff; border-radius: 14px; padding: 30px 28px 26px;
  box-shadow: 0 24px 60px rgba(30, 31, 27, 0.12);
}
.fr-label { font-size: 14px; color: var(--fr-mute); }
.fr-label b { color: var(--fr-ink); font-weight: 550; }
.fr-card .price { font-size: 48px; font-weight: 500; letter-spacing: -0.02em; margin: 10px 0 2px; color: var(--fr-ink); }
.fr-card .price small { font-size: 15px; color: var(--fr-mute); font-weight: 450; letter-spacing: 0; }
.fr-card .setup { font-size: 14px; color: var(--fr-mute); }
.fr-price-p { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fr-hair); font-size: 14.5px; color: var(--fr-mute); line-height: 1.55; }
.fr-cta {
  display: block; margin-top: 22px; text-align: center;
  background: var(--fr-ink); color: var(--fr-paper);
  font-size: 15px; font-weight: 550; padding: 14px 18px; border-radius: 9px; text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.fr-cta:hover { background: #000; transform: translateY(-1px); }
.fr-cta:focus-visible { outline: 2px solid var(--fr-slate); outline-offset: 3px; }

@media (max-width: 900px) {
  .firstrole { padding: 88px 0; }
  .fr-grid { grid-template-columns: 1fr; gap: 40px; }
  .fr-card { max-width: 420px; }
}
@media (max-width: 480px) {
  .fr-scope { grid-template-columns: 1fr; }
}