/* ==========================================================================
   RUBRIK — COMPONENTS
   One definition per component. Sections compose these; they never restyle
   them. Where the reference drifted (asymmetric padding, 12.5px labels,
   68px gutters) the intended value is used and flagged with NORMALISED.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON
   Axes: size (sm|md|lg) × tone (primary|secondary|dark|accent|ghost)
         × shape (sharp|rounded|pill) × type (mono-caps|caps)
   -------------------------------------------------------------------------- */
.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-ref-space-2);
  border: var(--rb-ref-border-hairline) solid transparent;
  border-radius: var(--rb-ref-radius-xs);
  font-family: var(--rb-sys-font-functional);
  font-weight: var(--rb-ref-weight-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--rb-sys-duration-2) ease,
    border-color     var(--rb-sys-duration-2) ease,
    color            var(--rb-sys-duration-2) ease;
}
.rb-btn:disabled,
.rb-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.rb-btn__icon { flex: none; display: block; }

/* -- Size -- */
.rb-btn--sm {
  min-height: 34px;
  padding: 10px var(--rb-ref-space-5);
  font-size: var(--rb-sys-text-p2-size);
  line-height: 1;
}
.rb-btn--md {
  min-height: 44px;
  /* NORMALISED: reference had padding-top 16 / bottom 12 — squared to 14. */
  padding: 14px var(--rb-ref-space-6);
  font-size: var(--rb-sys-text-p1-size);
  line-height: 1;
}
.rb-btn--lg {
  min-height: 46px;
  padding: 14px var(--rb-ref-space-6);
  font-size: 16px;
  line-height: 1;
}

/* -- Type treatment -- */
.rb-btn--mono-caps {
  font-family: var(--rb-sys-font-label);
  font-weight: var(--rb-ref-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--rb-sys-text-l1-tracking);
}
.rb-btn--caps {
  font-weight: var(--rb-ref-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* -- Shape -- */
.rb-btn--sharp   { border-radius: var(--rb-ref-radius-none); }
.rb-btn--rounded { border-radius: var(--rb-ref-radius-xs); }
.rb-btn--pill    { border-radius: var(--rb-ref-radius-full); }

/* -- Tone -- */
.rb-btn--primary {
  background: var(--rb-sys-cta-primary-bg);
  color: var(--rb-sys-cta-primary-fg);
  border-color: var(--rb-sys-cta-primary-bg);
}
.rb-btn--primary:hover { background: var(--rb-sys-cta-primary-bg-hover); border-color: var(--rb-sys-cta-primary-bg-hover); }

.rb-btn--secondary {
  background: var(--rb-sys-cta-secondary-bg);
  color: var(--rb-sys-cta-secondary-fg);
  border-color: var(--rb-sys-cta-secondary-border);
}
.rb-btn--secondary:hover { background: var(--rb-sys-cta-secondary-bg-hover); }

.rb-btn--dark {
  background: var(--rb-sys-cta-dark-bg);
  color: var(--rb-sys-cta-dark-fg);
  border-color: var(--rb-sys-cta-dark-bg);
}
.rb-btn--dark:hover { background: var(--rb-sys-cta-dark-bg-hover); border-color: var(--rb-sys-cta-dark-bg-hover); }

.rb-btn--accent {
  background: var(--rb-sys-cta-accent-bg);
  color: var(--rb-sys-cta-accent-fg);
  border-color: var(--rb-sys-cta-accent-bg);
}

.rb-btn--ghost { background: transparent; color: var(--rb-sys-fg-brand); border-color: transparent; }
.rb-btn--ghost:hover { background: var(--rb-sys-bg-teal-tint); }

/* Full-width on mobile, used by the hero CTA pair */
.rb-btn--block { width: 100%; }
@media (min-width: 768px) { .rb-btn--block { width: auto; } }

/* --------------------------------------------------------------------------
   FIELD  (label + input row + optional inline submit)
   -------------------------------------------------------------------------- */
.rb-field { display: flex; flex-direction: column; gap: var(--rb-ref-space-2); width: 100%; }

.rb-field__row {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-2);
  min-height: 44px;
  padding: var(--rb-ref-space-1) var(--rb-ref-space-1) var(--rb-ref-space-1) var(--rb-ref-space-4);
  background: var(--rb-sys-bg-canvas);
  border: var(--rb-ref-border-hairline) solid var(--rb-sys-border-subtle);
  border-radius: var(--rb-ref-radius-lg);
  transition: border-color var(--rb-sys-duration-2) ease, box-shadow var(--rb-sys-duration-2) ease;
}
.rb-field__row:focus-within {
  border-color: var(--rb-sys-border-brand);
  box-shadow: 0 0 0 3px rgb(20 79 83 / 0.12);
}
.rb-field--pill .rb-field__row { border-radius: var(--rb-ref-radius-full); }
.rb-field--on-dark .rb-field__row { border-color: transparent; }

.rb-field__icon { flex: none; display: flex; align-items: center; color: var(--rb-sys-fg-navy); }

.rb-field__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--rb-sys-fg-primary);
  /* 16px below 768 prevents iOS Safari zooming the page on focus.
     NORMALISED: reference mixed 14px and 16px across inputs. */
  font-size: 16px;
  line-height: var(--rb-sys-text-p1-leading);
  letter-spacing: var(--rb-sys-text-p1-tracking);
}
@media (min-width: 768px) { .rb-field__input { font-size: var(--rb-sys-text-p1-size); } }
.rb-field__input::placeholder { color: var(--rb-sys-fg-placeholder); opacity: 1; }
.rb-field__input:focus { outline: none; }
.rb-field__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* --------------------------------------------------------------------------
   CHIP — outlined category marker on the stat cards
   -------------------------------------------------------------------------- */
.rb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--rb-ref-space-3) var(--rb-ref-space-5);
  background: var(--rb-sys-bg-canvas);
  border: var(--rb-ref-border-hairline) solid var(--rb-sys-border-brand);
  border-radius: var(--rb-ref-radius-none);
  color: var(--rb-sys-fg-brand);
  font-size: var(--rb-sys-text-p1-size);
  font-weight: var(--rb-ref-weight-medium);
  line-height: 18px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BADGE — the "Rubrik" tab clipped to a testimonial photo
   Distinctive asymmetric corner is intentional; kept verbatim.
   -------------------------------------------------------------------------- */
.rb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-ref-space-2);
  height: 40px;
  padding-inline: 0 var(--rb-ref-space-3);
  background: var(--rb-sys-bg-canvas);
  border-radius: 0 var(--rb-ref-radius-xl) 0 var(--rb-ref-radius-lg);
  color: var(--rb-sys-fg-primary);
}
.rb-badge__mark { width: 20px; height: 20px; flex: none; }
.rb-badge__text { font-size: var(--rb-sys-text-p1-size); font-weight: var(--rb-ref-weight-medium); line-height: 21px; }

/* --------------------------------------------------------------------------
   EYEBROW / KICKER — mono label above a heading
   -------------------------------------------------------------------------- */
.rb-eyebrow {
  font-family: var(--rb-sys-font-label);
  font-size: var(--rb-sys-text-l1-size);
  line-height: var(--rb-sys-text-l1-leading);
  letter-spacing: var(--rb-sys-text-l1-tracking);
  font-weight: var(--rb-sys-text-l1-weight);
  text-transform: uppercase;
  color: var(--rb-sys-fg-primary);
}

/* --------------------------------------------------------------------------
   ARROW LINK — "Explore →"
   -------------------------------------------------------------------------- */
.rb-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rb-ref-space-2);
  color: var(--rb-sys-fg-brand);
  font-size: var(--rb-sys-text-p1-size);
  font-weight: var(--rb-ref-weight-medium);
  line-height: 21px;
}
.rb-arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   DOTS — pagination
   -------------------------------------------------------------------------- */
.rb-dots { display: flex; align-items: center; gap: var(--rb-ref-space-2); }
.rb-dots__dot {
  width: 8px; height: 8px;
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-sys-border-teal);
  transition: width var(--rb-sys-duration-3) var(--rb-sys-ease-out),
              background-color var(--rb-sys-duration-3) ease;
}
.rb-dots__dot[aria-current="true"] { width: 24px; background: var(--rb-sys-bg-accent); }
/* Hit area stays ≥24px without changing the visual dot */
.rb-dots__dot { position: relative; }
.rb-dots__dot::after { content: ""; position: absolute; inset: -10px; }

/* --------------------------------------------------------------------------
   ICON BUTTON — 32px circle, used by the stacked-surfaces controls
   -------------------------------------------------------------------------- */
.rb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: var(--rb-ref-border-hairline) solid var(--rb-sys-border-teal);
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-sys-bg-canvas);
  color: var(--rb-sys-fg-primary);
  transition: background-color var(--rb-sys-duration-2) ease, border-color var(--rb-sys-duration-2) ease;
}
.rb-icon-btn:hover { background: var(--rb-sys-bg-teal-tint); border-color: var(--rb-sys-border-brand); }
.rb-icon-btn--lg { width: 72px; height: 72px; border-color: transparent; background: var(--rb-sys-border-default); }

/* --------------------------------------------------------------------------
   STAT BOX — figure + label, overlaid on media
   -------------------------------------------------------------------------- */
.rb-statbox {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-3);
  padding: var(--rb-ref-space-5) var(--rb-ref-space-4);
  background: var(--rb-sys-bg-canvas);
}
.rb-statbox--roomy { padding: var(--rb-ref-space-6) var(--rb-ref-space-7); }
.rb-statbox__value {
  font-size: var(--rb-sys-text-h3-size);
  line-height: var(--rb-sys-text-h3-leading);
  letter-spacing: var(--rb-sys-text-h3-tracking);
  font-weight: var(--rb-ref-weight-medium);
  color: var(--rb-sys-fg-brand);
}
.rb-statbox__label {
  font-size: var(--rb-sys-text-p1-size);
  line-height: 1.4;
  color: var(--rb-sys-fg-primary);
}

/* --------------------------------------------------------------------------
   FEATURE LIST — dotted bullet list inside surface panels
   -------------------------------------------------------------------------- */
.rb-feature-list { display: flex; flex-direction: column; gap: var(--rb-ref-space-4); }
.rb-feature-list__item { display: flex; align-items: flex-start; gap: var(--rb-ref-space-3); }
.rb-feature-list__dot {
  flex: none;
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-sys-bg-accent);
}
.rb-feature-list__text {
  font-size: var(--rb-sys-text-p1-size);
  line-height: 1.4;
  color: var(--rb-sys-fg-primary);
}

/* --------------------------------------------------------------------------
   ACCORDION
   -------------------------------------------------------------------------- */
.rb-accordion { display: flex; flex-direction: column; }
.rb-accordion__item { border-top: var(--rb-ref-border-hairline) solid var(--rb-sys-border-rule); }
.rb-accordion__item:last-child { border-bottom: var(--rb-ref-border-hairline) solid var(--rb-sys-border-rule); }
.rb-accordion__item[data-open="true"] { border-color: var(--rb-sys-border-rule-active); }

.rb-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-ref-space-6);
  width: 100%;
  /* NORMALISED: reference used 32/24 when open, 24/24 when closed. */
  padding-block: var(--rb-ref-space-6);
  text-align: left;
  color: var(--rb-sys-fg-primary);
}
.rb-accordion__question {
  font-size: var(--rb-sys-text-h4-size);
  line-height: var(--rb-sys-text-h4-leading);
  letter-spacing: var(--rb-sys-text-h4-tracking);
  font-weight: var(--rb-ref-weight-medium);
}
.rb-accordion__icon { flex: none; position: relative; width: 20px; height: 20px; }
.rb-accordion__icon::before,
.rb-accordion__icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--rb-sys-duration-2) var(--rb-sys-ease-out);
}
.rb-accordion__icon::after { transform: rotate(90deg); }
.rb-accordion__trigger[aria-expanded="true"] .rb-accordion__icon::after { transform: rotate(0deg); }

.rb-accordion__panel { overflow: hidden; }
.rb-accordion__answer {
  padding-block: 0 var(--rb-ref-space-9);
  font-size: var(--rb-sys-text-h6-size);
  line-height: var(--rb-sys-text-h6-leading);
  color: var(--rb-sys-fg-primary);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   TABS
   -------------------------------------------------------------------------- */
.rb-tabs { display: flex; gap: var(--rb-ref-space-4); }
.rb-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-2);
  flex: 1 1 0;
  min-height: 50px;
  padding: var(--rb-ref-space-4) var(--rb-ref-space-5);
  background: var(--rb-sys-bg-muted);
  color: var(--rb-sys-fg-slate);
  transition: background-color var(--rb-sys-duration-3) ease, color var(--rb-sys-duration-3) ease;
}
.rb-tabs__tab[aria-selected="true"] { background: var(--rb-ref-teal-400); color: var(--rb-sys-fg-primary); }
.rb-tabs__marker {
  flex: none;
  width: 10px; height: 10px;
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-sys-bg-canvas);
  opacity: 0;
}
.rb-tabs__tab[aria-selected="true"] .rb-tabs__marker { opacity: 1; }
/* NORMALISED: reference label was 12.5px; snapped to the L1 step (12px). */
.rb-tabs__label {
  font-family: var(--rb-sys-font-label);
  font-size: var(--rb-sys-text-l1-size);
  line-height: var(--rb-sys-text-l1-leading);
  letter-spacing: var(--rb-sys-text-l1-tracking);
  font-weight: var(--rb-ref-weight-medium);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   PLUS MARK — decorative corner ticks on the platform intro
   -------------------------------------------------------------------------- */
.rb-plus { width: 12px; height: 12px; color: var(--rb-sys-fg-primary); }