:root {
  --bien-google-blue: #4285F4;
  --bien-dsa-blue: #004583;
  --bien-google-red: #EA4335;
  --bien-google-yellow: #FBBC05;
  --bien-google-green: #34A853;
  --bien-gray-900: #3C4043;
  --bien-gray-700: #5F6368;
  --bien-gray-500: #9AA0A6;
  --bien-gray-300: #DADCE0;
}

/* Legacy buttons remain readable for content created before 1.1. */
.bien-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bien-buttons-gap, 12px);
  margin: 22px 0;
}
.bien-buttons.is-left { justify-content: flex-start; }
.bien-buttons.is-center { justify-content: center; }
.bien-buttons.is-right { justify-content: flex-end; }
.bien-button {
  --bien-btn-bg: var(--bien-brand-primary, #4285F4);
  --bien-btn-hover-bg: var(--bien-brand-primary-hover, #004583);
  --bien-btn-text: var(--bien-brand-on-primary, #FFFFFF);
  --bien-btn-hover-text: var(--bien-brand-on-primary, #FFFFFF);
  --bien-btn-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: var(--bien-btn-radius);
  background: var(--bien-btn-bg);
  color: var(--bien-btn-text) !important;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bien-button.is-small { padding: 11px 20px; font-size: 15px; }
.bien-button.is-medium { padding: 14px 26px; font-size: 18px; }
.bien-button.is-large { padding: 16px 31px; font-size: 20px; }
.bien-button:hover,
.bien-button:focus-visible { background: var(--bien-btn-hover-bg); color: var(--bien-btn-hover-text) !important; }
.bien-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--bien-btn-bg) 35%, transparent); outline-offset: 3px; }
.bien-button:active { transform: translateY(1px); }

/* ==============================
   BIEN TIMELINE
================================ */
.bien-timeline {
  --bien-timeline-line: var(--bien-brand-border, #DADCE0);
  --bien-timeline-card: var(--bien-brand-surface-soft, #F4F8FF);
  --bien-timeline-heading: var(--bien-brand-heading, #5F6368);
  --bien-timeline-text: var(--bien-brand-text, #3C4043);
  --bien-timeline-muted: var(--bien-brand-muted, #5F6368);
  --bien-timeline-gap: 28px;
  margin: 38px 0;
  font-family: Inter, Arial, sans-serif;
}
.bien-timeline-heading {
  margin: 0 0 30px;
  color: var(--bien-timeline-heading);
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  font-weight: 500;
}
.bien-timeline-list { position: relative; padding-left: 42px; }
.bien-timeline-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--bien-timeline-line);
}
.bien-timeline-item {
  --bien-timeline-accent: var(--bien-brand-sequence-1, #4285F4);
  position: relative;
  margin: 0 0 var(--bien-timeline-gap);
}
.bien-timeline-item:last-child { margin-bottom: 0; }
.bien-timeline-item:nth-child(4n + 1) { --bien-timeline-accent: var(--bien-brand-sequence-1, #4285F4); }
.bien-timeline-item:nth-child(4n + 2) { --bien-timeline-accent: var(--bien-brand-sequence-2, #EA4335); }
.bien-timeline-item:nth-child(4n + 3) { --bien-timeline-accent: var(--bien-brand-sequence-3, #FBBC05); }
.bien-timeline-item:nth-child(4n + 4) { --bien-timeline-accent: var(--bien-brand-sequence-4, #34A853); }
.bien-timeline-dot {
  position: absolute;
  left: -38px;
  top: 22px;
  width: 16px;
  height: 16px;
  border: 4px solid var(--bien-brand-surface, #FFFFFF);
  border-radius: 50%;
  background: var(--bien-timeline-accent);
  z-index: 1;
}
.bien-timeline-card {
  padding: 22px 24px;
  border-top: 3px solid var(--bien-timeline-accent);
  border-radius: 4px;
  background: var(--bien-timeline-card);
}
.bien-timeline-title {
  display: block;
  margin: 0 0 3px;
  color: var(--bien-timeline-text);
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
.bien-timeline-detail { margin: 0; color: var(--bien-timeline-muted); font-size: 16px; line-height: 1.5; }

@media (max-width: 600px) {
  .bien-buttons { gap: 10px; }
  .bien-button.is-medium { padding: 13px 22px; font-size: 16px; }
  .bien-button.is-large { padding: 15px 25px; font-size: 18px; }
  .bien-timeline { margin: 30px 0; }
  .bien-timeline-heading { margin-bottom: 24px; font-size: 28px; }
  .bien-timeline-list { padding-left: 34px; }
  .bien-timeline-list::before { left: 8px; }
  .bien-timeline-dot { left: -34px; }
  .bien-timeline-card { padding: 19px 20px; }
}
@media (prefers-reduced-motion: reduce) { .bien-button { transition: none; } }