html, body { background-color: #F4EFE9; color: #0E1116; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Unified vertical rhythm — single gap value used between every section
   and for the subhead-to-image gap inside the hero. */
:root { --section-gap: 78px; --widget-radius: 6px; --nav-height: 64px; }
@media (max-width: 960px) { :root { --section-gap: 60px; } }
@media (max-width: 639px) { :root { --section-gap: 44px; --nav-height: 56px; } }

/* Type scale — desktop. H1 + H2 share the hero opening-line size (43px) for site-wide consistency. */
.t-h1 { font-family: 'Crimson Text', Georgia, serif; font-size: 43px; font-weight: 600; line-height: 1.10; letter-spacing: -0.02em; }
.t-h2 { font-family: 'Crimson Text', Georgia, serif; font-size: 43px; font-weight: 600; line-height: 1.10; letter-spacing: -0.015em; }
.t-h3 { font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.30; letter-spacing: -0.01em; }
.t-h4 { font-family: 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.40; }
.t-body-lg { font-size: 18px; font-weight: 400; line-height: 1.6; }
.t-body    { font-size: 16px; font-weight: 400; line-height: 1.6; }
.t-body-sm { font-size: 14px; font-weight: 400; line-height: 1.5; }
.t-eyebrow { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; }
.t-nav     { font-size: 14px; font-weight: 500; line-height: 1.4; }
.t-button  { font-size: 15px; font-weight: 500; line-height: 1; }
.t-footlnk { font-size: 13px; font-weight: 400; line-height: 1.8; }

/* Type scale — mobile (<640px) */
@media (max-width: 639px) {
  .t-h1 { font-size: 26px; line-height: 1.15; }
  .t-h2 { font-size: 26px; line-height: 1.15; }
  .t-h3 { font-size: 18px; }
  .t-body-lg { font-size: 17px; }
}

/* Components */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background-color: #2964B2; color: #FFFFFF;
  border-radius: var(--widget-radius); padding: 7px 13px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1;
  transition: transform 180ms ease, opacity 180ms ease;
  outline: none; border: none; cursor: pointer;
}
.btn-primary:hover { background-color: #1F4F92; transform: translateY(-1px); }
.btn-primary:active { background-color: #173E75; transform: translateY(0); }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px rgba(41, 100, 178, 0.40); }

.btn-primary-lg { padding: 16px 32px; font-size: 17px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  color: #2964B2; background: none; border: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1;
  padding: 8px 4px; border-radius: 6px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.btn-secondary:hover { color: #1F4F92; transform: translateX(2px); }
.btn-secondary:active { color: #173E75; }
.btn-secondary:focus-visible { box-shadow: 0 0 0 4px rgba(41, 100, 178, 0.40); }

/* Sticky nav */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: #F4EFE9;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease;
}
.site-nav.is-scrolled { border-bottom-color: #E8E2DA; }
.site-nav-inner { height: var(--nav-height); }
.site-nav-logo { height: 62px; width: 62px; }
@media (max-width: 639px) { .site-nav-logo { height: 52px; width: 52px; } }

/* Mobile nav menu — toggled by the hamburger button below the lg breakpoint */
.mobile-menu {
  position: absolute; top: calc(var(--nav-height) - 4px); right: 24px;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: #FFFFFF;
  border: 1px solid #E8E2DA; border-radius: 12px;
  box-shadow: 0 14px 32px rgba(14, 17, 22, 0.14), 0 3px 10px rgba(14, 17, 22, 0.07);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease; z-index: 60;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu-link {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  line-height: 1.2; color: #0E1116; text-decoration: none; white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease;
}
.mobile-menu-link:hover { background: #F4EFE9; color: #2964B2; }
.mobile-menu-link:focus-visible { outline: 2px solid rgba(41, 100, 178, 0.4); outline-offset: 2px; }
@media (min-width: 768px) and (max-width: 1023px) { .mobile-menu { right: 48px; } }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  color: #0E1116; font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 8px 6px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute; left: 6px; right: 6px; bottom: 4px;
  height: 1.5px; background: #0E1116;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.6;
}
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, -4px); opacity: 0; pointer-events: none;
  min-width: 280px; background: #FFFFFF;
  border: 1px solid #E8E2DA; border-radius: var(--widget-radius);
  padding: 8px; z-index: 50;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.dropdown-menu.is-open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown-item {
  display: block; padding: 10px 16px; border-radius: var(--widget-radius);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4;
  color: #0E1116; text-decoration: none;
  transition: opacity 150ms ease;
}
.dropdown-item:hover { background: #F4EFE9; }
.dropdown-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(41, 100, 178, 0.40); }

/* Language switcher */
.lang-switcher {
  display: inline-flex; align-items: center; gap: 0;
  min-height: 32px;
}
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 6px 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1;
  background: none; border: none; cursor: pointer; border-radius: 6px;
  color: #8A8F97; font-weight: 400;
  transition: opacity 150ms ease;
}
.lang-btn.is-active { color: #0E1116; font-weight: 600; }
.lang-btn:hover { opacity: 0.7; }
.lang-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); }
.lang-divider {
  width: 1px; height: 12px; background: #D4CCC0;
  display: inline-block;
}

/* Hero product visual — no background/shadow; image gets widget-radius corners */
.hero-visual { display: block; }
/* Floating product render: layered, warm-tinted drop-shadow that follows the
   laptop's transparent silhouette (drop-shadow, not box-shadow). */
.hero-visual img {
  display: block; width: 100%; height: auto;
  filter:
    drop-shadow(0 26px 46px rgba(28, 36, 53, 0.20))
    drop-shadow(0 8px 16px rgba(28, 36, 53, 0.12));
}

/* Hero type overrides */
.hero-h1 {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 43px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  white-space: pre-line;
}
.hero-sub { font-size: 14px; font-weight: 400; line-height: 1.55; }
@media (max-width: 639px) {
  .hero-h1 { font-size: 26px; line-height: 1.15; }
  .hero-sub { font-size: 14px; }
}

/* Funding strip */
.funding-row {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.funding-caption {
  color: #0E1116;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
}
.funding-logo { height: 140px; width: auto; display: block; }
@media (max-width: 639px) {
  .funding-row { flex-direction: column; gap: 24px; }
  .funding-caption { font-size: 22px; }
  .funding-logo { height: 96px; }
}

.eyebrow-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid #E8E2DA; background: #FFFFFF;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  color: #4A4F58;
}
.eyebrow-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: #2964B2; display: inline-block;
}

/* Card system — single approach: subtle border, no shadow */
.card {
  background-color: #FFFFFF;
  border: 1px solid #E8E2DA;
  border-radius: var(--widget-radius);
  overflow: hidden;
  transition: transform 220ms ease, opacity 220ms ease;
}
.card-interactive:hover { transform: translateY(-2px); }
.card-dark {
  background-color: #0E1116;
  color: #F4EFE9;
  border-radius: var(--widget-radius);
  overflow: hidden;
  border: 1px solid #0E1116;
  transition: transform 220ms ease, opacity 220ms ease;
}
.card-dark.card-interactive:hover { transform: translateY(-2px); }

/* Footer link */
.footer-link {
  color: #8A8F97; font-size: 13px; font-weight: 400; line-height: 1.8;
  transition: opacity 180ms ease;
  text-decoration: none;
}
.footer-link:hover { color: #0E1116; opacity: 1; }
.footer-link:focus-visible { outline: none; color: #0E1116; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); border-radius: 4px; }

/* Section vertical rhythm — every section uses the unified gap on top
   and zero bottom padding, so the NEXT section's pt creates the gap. */
.section { padding-top: var(--section-gap); padding-bottom: 0; }
.section-tight { padding-top: var(--section-gap); padding-bottom: 0; }
.section-cta { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }

/* Feature carousel — bleeds to the right viewport edge.
   The headline + controls live inside the max-w-content grid;
   the track itself escapes the grid so cards extend off the right. */
.feature-carousel-wrap {
  position: relative;
  padding-left: 24px;
  padding-right: 0;
}
@media (min-width: 768px) { .feature-carousel-wrap { padding-left: 48px; } }
@media (min-width: 1024px) {
  .feature-carousel-wrap {
    padding-left: max(80px, calc((100vw - 1200px) / 2 + 80px));
  }
}
.feature-track {
  list-style: none; padding: 4px 0; margin: 0;
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feature-track::-webkit-scrollbar { display: none; }
.feature-card-wrap {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
}
@media (max-width: 960px) { .feature-card-wrap { flex: 0 0 260px; } }
@media (max-width: 639px) { .feature-card-wrap { flex: 0 0 240px; } }

/* Subtle fade on the right edge to indicate more content. */
.feature-fade {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 96px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(244, 239, 233, 0), #F4EFE9 85%);
  z-index: 5;
}

.feature-card {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 12px;
  border-radius: var(--widget-radius);
  padding: 22px 20px 20px;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 220ms ease, opacity 220ms ease;
}
a.feature-card:hover { transform: translateY(-2px); }
a.feature-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); }

/* Card color variants — each card has a distinct subdued tone */
.feature-card--olive { background: #595B47; color: #F4EFE9; }
.feature-card--slate { background: #9DAEBC; color: #14202B; }
.feature-card--beige { background: #D5C7AE; color: #1C2435; }
.feature-card--navy  { background: #1C2435; color: #F4EFE9; }
.feature-card--rust  { background: #A87963; color: #F4EFE9; }

.feature-card-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  color: inherit; margin: 0;
}
.feature-card-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 400; line-height: 1.5;
  color: inherit; opacity: 0.78;
  margin: 0; max-width: 95%;
}
.feature-card-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: #FFFFFF; color: #1C2435;
  margin-top: 2px;
}
.feature-card-visual {
  margin-top: auto; padding-top: 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}

/* Embedded mini-widget look (white floating fragments inside colored cards) */
.mini-widget {
  background: #FFFFFF; color: #1C2435;
  border-radius: var(--widget-radius); padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  width: 100%;
}
.mini-widget--row {
  display: flex; align-items: center; gap: 10px;
}
.mw-bubble { background: #F4EFE9; border-radius: var(--widget-radius); padding: 8px 10px; color: #1C2435; }
.mw-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid #E8E2DA;
}
.mw-row:first-child { border-top: none; }
.mw-dot { width: 14px; height: 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-dot--check { background: #2964B2; color: #FFFFFF; font-size: 9px; }
.mw-dot--open  { border: 1.5px solid #D4CCC0; }
.mw-icon-tile  { width: 28px; height: 28px; border-radius: 6px; background: #F4EFE9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #4A4F58; }
/* Integration brand-logo grid (inside the Integration feature card) */
.mw-logo-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mw-logo       { background: #FFFFFF; box-shadow: 0 1px 2px rgba(14,17,22,0.10); }
.mw-logo svg   { display: block; }
.mw-logo--more { background: #1C2435; color: #FFFFFF; font-size: 11px; font-weight: 600; box-shadow: none; }
.mw-send { margin-left: auto; width: 22px; height: 22px; border-radius: 999px; background: #2964B2; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.mw-muted { color: #8A8F97; }

/* Carousel controls */
.carousel-controls {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 28px;
}
.carousel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent; border: 1px solid #D4CCC0; cursor: pointer;
  color: #1C2435;
  transition: transform 180ms ease, opacity 180ms ease;
}
.carousel-btn:hover { transform: translateY(-1px); }
.carousel-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); }
.carousel-btn:disabled { opacity: 0.30; cursor: not-allowed; transform: none; }

/* Floating fragments offsets (process section) */
.float-tl { position: absolute; top: -32px; left: -48px; }
.float-br { position: absolute; bottom: -40px; right: -56px; }
@media (max-width: 960px) {
  .float-tl, .float-br { position: static; margin: 16px auto; }
}

/* Visually-clear placeholder treatment for copy */
.ph { color: #4A4F58; }

/* ============== SECURITY SECTION (light, white boxes, 4:3) ============== */
.security-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 960px) {
  .security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 639px) {
  .security-grid { grid-template-columns: 1fr; gap: 14px; }
}

.security-box {
  height: 200px;
  padding: 20px 18px;
  border-radius: var(--widget-radius);
  background: #FFFFFF;
  border: 1px solid #E8E2DA;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 10px;
  overflow: hidden;
}
@media (max-width: 639px) { .security-box { height: 200px; } }
.security-icon {
  width: 44px; height: 44px;
  border-radius: var(--widget-radius);
  border: 1px solid #E8E2DA;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0E1116;
}
.security-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: #0E1116;
  margin: 0;
}
.security-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 400; line-height: 1.5;
  color: #4A4F58;
  margin: 0;
}

/* ============== FOOTER ============== */
.footer-logo {
  height: 126px; width: 126px;
  border-radius: var(--widget-radius);
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* ============== HÜRDEN (paired stat + quote carousel) ============== */
.hurden-topic-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}
.hurden-topic-title {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
  color: #0E1116; margin: 0;
  min-width: 220px; text-align: center;
}
@media (max-width: 639px) {
  .hurden-topic-title { font-size: 24px; min-width: 0; }
  .hurden-topic-row { gap: 12px; }
}

.hurden-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  transition: opacity 180ms ease;
}
@media (max-width: 720px) {
  .hurden-stage { grid-template-columns: 1fr; }
}
.hurden-stage.is-swapping { opacity: 0; }

.hurden-stat, .hurden-quote {
  background: #FFFFFF;
  border: 1px solid #E8E2DA;
  border-radius: var(--widget-radius);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.hurden-stat-number {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 88px; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  color: #0E1116;
}
@media (max-width: 720px) {
  .hurden-stat-number { font-size: 64px; }
}
.hurden-stat-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: #0E1116;
  margin-top: 20px;
}
.hurden-stat-source {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; line-height: 1.4;
  color: #8A8F97;
  margin-top: auto;
  padding-top: 24px;
}

.hurden-quote-text {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 22px; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em;
  color: #0E1116; margin: 0;
}
@media (max-width: 720px) {
  .hurden-quote-text { font-size: 18px; }
}
.hurden-quote-attr {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  color: #8A8F97;
  margin-top: auto;
  padding-top: 24px;
}

.hurden-pips {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 24px;
}
.hurden-pip {
  width: 8px; height: 8px; border-radius: 999px;
  background: #D4CCC0;
  border: none; cursor: pointer; padding: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.hurden-pip.is-active { background: #0E1116; transform: scale(1.2); }
.hurden-pip:hover { background: #8A8F97; }
.hurden-pip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41,100,178,0.4); }

/* ============== TEAM PAGE ============== */
/* Wider wrapper so the 5 portrait cards breathe past the standard max-w-content. */
.team-grid-bleed {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .team-grid-bleed { padding-left: 32px; padding-right: 32px; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: #FFFFFF;
  border: 1px solid #E8E2DA;
  border-radius: var(--widget-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F4EFE9;
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15);
}
.team-content {
  padding: 16px 16px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
  flex: 1;
}
.team-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: #0E1116; margin: 0;
}
.team-role {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; line-height: 1.3;
  color: #4A4F58;
}
.team-bio {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; line-height: 1.5;
  color: #4A4F58;
  margin: 8px 0 0;
}
.team-linkedin {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  color: #2964B2; text-decoration: none;
  transition: opacity 180ms ease;
}
.team-linkedin:hover { opacity: 0.7; }
.team-linkedin:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41,100,178,0.4); border-radius: 4px; }

/* ============== OPEN POSITIONS ============== */
.job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) { .job-grid { grid-template-columns: 1fr; } }

.job-card {
  background: #FFFFFF;
  border: 1px solid #E8E2DA;
  border-radius: var(--widget-radius);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, opacity 220ms ease;
}
.job-card:hover { transform: translateY(-2px); }
.job-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41,100,178,0.4); }

.job-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8A8F97;
}
.job-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: #0E1116; margin: 0;
}
.job-summary {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.55;
  color: #4A4F58; margin: 0;
}
.job-cta {
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  color: #2964B2;
}

/* Job detail page content */
.job-detail {
  max-width: 720px;
}
.job-detail h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: #0E1116;
  margin: 0 0 12px;
}
.job-detail section + section { margin-top: 40px; }
.job-detail p { margin: 0 0 12px; color: #4A4F58; line-height: 1.6; }
.job-detail ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.job-detail li {
  position: relative;
  padding-left: 18px;
  color: #4A4F58; line-height: 1.6;
}
.job-detail li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 999px;
  background: #2964B2;
}

/* ============== FEATURE PAGE (sub-pages) ============== */
.feature-page-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: #4A4F58; font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.feature-page-back:hover { opacity: 0.7; }
.feature-page-back:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41, 100, 178, 0.40); border-radius: 4px; }

.feature-page-placeholder {
  background: #FFFFFF;
  border: 1px dashed #D4CCC0;
  border-radius: var(--widget-radius);
  padding: 64px 32px;
  text-align: center;
  color: #8A8F97;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}