/* Orbit 360 activation experience: meaningful, not decorative, empty state. */
.product-gate {
  max-width: 1180px;
  min-height: 520px;
  grid-template-columns: 1.06fr .94fr;
  gap: 64px;
  margin: 58px auto;
  padding: 62px;
  border: 1px solid #eeeafd;
  border-radius: 26px;
  background: linear-gradient(132deg, #fff 57%, #fbf9ff);
  box-shadow: 0 25px 70px #3821760d;
}

.gate-copy { max-width: 560px; }
.gate-copy h1 { margin-bottom: 20px; font-size: 54px; }
.gate-copy > p:not(.eyebrow):not(.gate-assurance) {
  max-width: 520px;
  color: #52627f;
  font-size: 16px;
  line-height: 1.6;
}
.gate-assurance {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 19px 0 0;
  color: #71717a;
  font-size: 12px;
  font-weight: 600;
}
.gate-assurance span {
  position: static !important;
  display: grid !important;
  place-items: center;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  color: #417958;
  background: #dff5e8 !important;
  box-shadow: none !important;
  font-size: 11px;
}

.gate-grid {
  height: 342px;
  overflow: hidden;
  border-radius: 20px;
  background-color: #7d43f4;
  background-image:
    linear-gradient(#ffffff1d 1px, transparent 1px),
    linear-gradient(90deg, #ffffff1d 1px, transparent 1px),
    radial-gradient(circle at 82% 83%, #ba8cff, transparent 29%);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px #ffffff45, 0 20px 40px #48208a29;
}
.gate-grid-label {
  position: absolute;
  top: 27px;
  left: 30px;
  margin: 0;
  color: #f4efff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.gate-flow-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 67px;
  padding: 12px 14px;
  border: 1px solid #ffffffb5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 28px #30116835;
}
.gate-flow-card span {
  position: static !important;
  display: grid !important;
  place-items: center;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  color: var(--violet);
  background: #eee8ff !important;
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 700;
}
.gate-flow-card small {
  display: block;
  margin-bottom: 3px;
  color: #6a7190;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gate-flow-card b { display: block; color: #16274b; font-size: 13px; }
.gate-flow-card em { margin-left: 5px; color: var(--orange); font-family: var(--sans); font-size: 18px; font-style: normal; }
.gate-flow-one { top: 76px; left: 48px; width: 70%; transform: rotate(-3deg); }
.gate-flow-two { top: 157px; right: 32px; width: 76%; transform: rotate(2deg); }
.gate-flow-three { bottom: 37px; left: 76px; width: 66%; transform: rotate(-1deg); }
.privacy-marker {
  position: absolute;
  right: 19px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f6efff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}
.privacy-marker i {
  position: static !important;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #ffffff73;
  border-radius: 7px;
  color: inherit;
  background: #ffffff21;
  box-shadow: none;
  font-style: normal;
}
.privacy-marker span {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 850px) {
  .product-gate { margin: 20px; padding: 30px; }
  .gate-copy h1 { font-size: 42px; }
  .gate-grid { height: 320px; }
  .gate-flow-one { left: 23px; width: 73%; }
  .gate-flow-two { right: 18px; width: 78%; }
  .gate-flow-three { left: 38px; width: 69%; }
}

.auth-secondary {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid #d8cfff;
  border-radius: 8px;
  color: #5730c9;
  background: #f7f4ff;
  font: 700 14px var(--sans);
  cursor: pointer;
}
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color: #95a0b2; font-size: 12px; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: #e3e7ef; content: ""; }
.auth-link { display: block; width: fit-content; margin: 8px auto; padding: 2px; border: 0; color: #5b38c5; background: transparent; font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; }
.reset-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: linear-gradient(130deg, #f8f4ff, #fff); }
.password-card { width: min(100%, 620px); }

.overview-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.overview-hero h1 { margin-bottom: 12px; }
.overview-hero .muted { max-width: 560px; margin-bottom: 0; }
.privacy-pill { display: flex; align-items: center; gap: 10px; min-width: 225px; padding: 12px 14px; border: 1px solid #e0d8ff; border-radius: 12px; background: #f9f7ff; }
.privacy-pill > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--violet); background: #eae4ff; font-size: 14px; }
.privacy-pill b, .privacy-pill small { display: block; }
.privacy-pill b { color: #3d2a80; font-size: 12px; }
.privacy-pill small { margin-top: 3px; color: #6c7290; font-size: 11px; }
.today-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.today-card { position: relative; min-height: 150px; padding: 24px 50px 22px 22px; border: 1px solid #e5e7f0; border-radius: 15px; color: var(--ink); background: #fff; text-align: left; font-family: var(--sans); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.today-card:hover { transform: translateY(-2px); border-color: #cfc0ff; box-shadow: 0 14px 28px #39227612; }
.today-card-primary { border-color: #e1d9ff; background: linear-gradient(135deg, #faf8ff, #f2ecff); }
.today-card b, .today-card small { display: block; }
.today-card b { margin: 14px 0 8px; font: 700 20px var(--serif); letter-spacing: -.025em; }
.today-card small { color: #62718b; font-size: 13px; line-height: 1.45; }
.today-number { color: var(--violet); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.today-arrow { position: absolute; top: 23px; right: 22px; color: var(--orange); font-size: 24px; }
.overview-divider { display: flex; align-items: center; gap: 17px; margin: 34px 0 4px; color: #6a728b; font-size: 12px; }
.overview-divider span { color: var(--violet); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.overview-divider::before, .overview-divider::after { height: 1px; background: #e3e6ee; content: ""; }
.overview-divider::before { width: 22px; }
.overview-divider::after { flex: 1; }
.overview-divider p { margin: 0; }

/* Cycle builder: a deliberate programme journey, not a dense settings form. */
.cycle-journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.cycle-journey-head h2 { margin: 0 0 12px; }
.cycle-journey-head > div > p:not(.eyebrow) { max-width: 620px; margin: 0; color: #62718b; line-height: 1.55; }
.journey-assurance { display: flex; align-items: center; gap: 10px; min-width: 242px; padding: 13px 15px; border: 1px solid #e6defe; border-radius: 13px; background: linear-gradient(135deg, #fbfaff, #f4f0ff); }
.journey-assurance > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #5b31d4; background: #e9e1ff; }
.journey-assurance b, .journey-assurance small { display: block; }
.journey-assurance b { color: #3c287b; font-size: 12px; }
.journey-assurance small { margin-top: 3px; color: #6d7290; font-size: 11px; }
.cycle-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; padding: 0; list-style: none; overflow: hidden; border: 1px solid #e4e7ef; border-radius: 15px; background: #fff; }
.cycle-steps li { position: relative; min-height: 106px; padding: 18px 15px 16px; border-left: 1px solid #e9ebf1; }
.cycle-steps li:first-child { border-left: 0; }
.cycle-steps li.active { background: linear-gradient(145deg, #faf8ff, #f1ebff); }
.cycle-steps li.active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background: var(--violet); }
.cycle-steps span, .cycle-steps b, .cycle-steps small { display: block; }
.cycle-steps span { margin-bottom: 12px; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.cycle-steps b { color: #182747; font-size: 13px; }
.cycle-steps small { margin-top: 5px; color: #758099; font-size: 11px; line-height: 1.35; }
.builder-stage { padding: 28px; border-color: #e2e5ef; box-shadow: 0 12px 28px #1e2a4910; }
.stage-label { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.stage-label > span { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 10px; color: #fff; background: var(--violet); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.stage-label b, .stage-label small { display: block; }
.stage-label b { color: #182747; font: 700 19px var(--serif); letter-spacing: -.02em; }
.stage-label small { margin-top: 3px; color: #71809a; font-size: 12px; }
.stage-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.stage-actions .button { margin-top: 0; }
.stage-actions small { max-width: 360px; color: #71809a; font-size: 12px; line-height: 1.45; }
.cycle-list-card { margin-top: 28px; }
.cycle-list-card .list-head { padding-bottom: 12px; border-bottom: 1px solid #e9ebf1; }
.cycle-list-card .list-head h3 { margin: 0; font: 700 22px var(--serif); letter-spacing: -.025em; }
.cycle-list-card .list-head .eyebrow { margin-bottom: 6px; }

/* People and rater selection communicates the privacy promise before data entry. */
.people-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.people-hero h2 { margin: 0 0 12px; }
.people-hero > div > p:not(.eyebrow) { max-width: 620px; margin: 0; color: #62718b; line-height: 1.55; }
.anonymity-card { display: flex; align-items: center; gap: 11px; width: min(100%, 292px); padding: 14px; border: 1px solid #d8eddf; border-radius: 13px; background: #f7fcf8; }
.anonymity-card > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: #287449; background: #ddf4e6; font-size: 19px; }
.anonymity-card b, .anonymity-card small { display: block; }
.anonymity-card b { color: #245d3c; font-size: 12px; }
.anonymity-card small { margin-top: 3px; color: #607d6a; font-size: 11px; line-height: 1.35; }
.people-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 27px; }
.people-flow article { min-height: 128px; padding: 18px; border: 1px solid #e3e6ef; border-radius: 14px; background: #fff; }
.people-flow article:first-child { border-color: #ded3ff; background: #faf8ff; }
.people-flow span, .people-flow b, .people-flow small { display: block; }
.people-flow span { margin-bottom: 17px; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.people-flow b { color: #192847; font: 700 16px var(--serif); letter-spacing: -.02em; }
.people-flow small { margin-top: 6px; color: #71809a; font-size: 11px; line-height: 1.4; }
.people-stage { height: 100%; margin-bottom: 0; padding: 27px; box-shadow: 0 12px 28px #1e2a490c; }
.audience-builder { margin-bottom: 26px; padding: 27px; border-color: #ded3ff; background: linear-gradient(135deg, #fdfcff, #f7f3ff); box-shadow: 0 12px 28px #1e2a490c; }
.audience-filter-panel { margin-top: 17px; padding: 17px; border: 1px solid #e7e4f2; border-radius: 13px; background: #fff; }
.audience-filter-panel > .form-note { margin: 0 0 14px; }
.audience-current-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; padding: 14px 16px; border: 1px solid #e7e4f2; border-radius: 12px; background: #fff; }
.audience-current-actions b, .audience-current-actions small { display: block; }
.audience-current-actions b { color: #263552; font-size: 13px; }
.audience-current-actions small { margin-top: 3px; color: #74809a; font-size: 11px; }
.audience-current-actions .button { flex: 0 0 auto; }
.audience-group { margin-top: 13px; padding: 15px 16px; border: 1px solid #dcd2ff; border-radius: 12px; background: #faf8ff; }
.audience-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.audience-group-head span, .audience-group-head b, .audience-group-head small { display: block; }
.audience-group-head span { color: var(--violet); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.audience-group-head b { margin-top: 3px; color: #263552; font: 700 18px var(--serif); }
.audience-group-head small, .audience-group > p { margin: 4px 0 0; color: #71809a; font-size: 11px; }
.audience-source-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.audience-source-list span { padding: 5px 8px; border: 1px solid #ded3ff; border-radius: 999px; color: #513c9f; background: #fff; font-size: 10px; font-weight: 700; }
.audience-source-list i { margin-left: 4px; color: #76829b; font-style: normal; }
.rater-builder { margin-bottom: 26px; padding: 27px; border-color: #d9dded; background: linear-gradient(135deg, #fff, #fbfcff); box-shadow: 0 12px 28px #1e2a490c; }
.perspective-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 18px 0; }
.perspective-option { display: flex; align-items: flex-start; gap: 8px; min-height: 86px; margin: 0; padding: 12px; border: 1px solid #e1e5ee; border-radius: 11px; background: #fff; cursor: pointer; }
.perspective-option:has(input:checked) { border-color: #cdbdff; background: #faf8ff; }
.perspective-option input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--violet); }
.perspective-option b, .perspective-option small { display: block; }
.perspective-option b { color: #263552; font-size: 12px; }
.perspective-option small { margin-top: 4px; color: #74809a; font-size: 10px; line-height: 1.3; }
.rater-filter-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rater-filter-controls label { grid-column: 1; }
.rater-impact { margin-top: 13px; padding: 14px 16px; border: 1px solid #dfeee4; border-radius: 12px; background: #fbfffc; }
.rater-impact b { color: #245d3c; font-size: 12px; }
.rater-impact p { margin: 4px 0 0; color: #60726b; font-size: 12px; line-height: 1.45; }
.external-contact-panel { margin-top: 16px; padding: 17px; border: 1px solid #d8e5f4; border-radius: 13px; background: #fbfdff; }
.external-contact-head b, .external-contact-head small { display: block; }
.external-contact-head b { color: #23395b; font-size: 14px; }
.external-contact-head small { margin-top: 4px; color: #71809a; font-size: 11px; line-height: 1.4; }
.external-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.external-contact-grid form, .external-import-box { padding: 15px; border: 1px solid #e1e7ef; border-radius: 11px; background: #fff; }
.external-contact-grid > * > b { color: #263552; font-size: 12px; }
.external-contact-grid label { margin-top: 12px; }
.external-contact-grid input { padding: 10px; }
.external-contact-grid .button { margin-top: 14px; }
.external-import-box p { color: #71809a; font-size: 11px; line-height: 1.5; }
.external-import-box code { padding: 1px 3px; border-radius: 3px; background: #f0f3f8; color: #475773; font: 10px var(--sans); }
.external-contact-list { margin-top: 15px; }
.external-row { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid #e8edf3; }
.external-row b { color: #263552; font-size: 12px; }
.external-row span { color: #71809a; font-size: 11px; text-align: right; }
.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 22px; background: #0a0a0f80; }
.review-modal-card { position: relative; width: min(100%, 720px); max-height: min(760px, calc(100vh - 44px)); overflow: auto; padding: 34px; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px #101b382e; }
.review-modal-card h2 { margin-bottom: 12px; font-size: 36px; }
.review-modal-card > p:not(.eyebrow):not(.form-note) { color: #71717a; line-height: 1.5; }
.modal-close { position: absolute; top: 16px; right: 17px; width: 34px; height: 34px; border: 1px solid #e2e6ef; border-radius: 50%; color: #52617b; background: #fff; font: 24px/1 var(--sans); cursor: pointer; }
.review-summary { display: grid; gap: 10px; margin: 24px 0; }
.review-summary article { padding: 16px; border: 1px solid #e5e7ef; border-radius: 12px; background: #fbfbff; }
.review-summary article:first-child { border-color: #ded3ff; background: #faf8ff; }
.review-summary span, .review-summary b { display: block; }
.review-summary span { margin-bottom: 6px; color: var(--violet); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.review-summary b { color: #22324f; font-size: 14px; }
.review-summary p { margin: 6px 0 0; color: #66758e; font-size: 12px; line-height: 1.45; }
.review-perspective-list { display: flex; flex-wrap: wrap; gap: 6px; }
.review-perspective-list span { margin: 0; padding: 4px 7px; border: 1px solid #ded3ff; border-radius: 99px; background: #fff; color: #513c9f; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.review-perspective-list i { margin-left: 4px; color: #76829b; font-style: normal; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal-actions .button { margin: 0; }
.audience-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 240px; overflow: auto; padding-right: 4px; }
.audience-option { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px; border: 1px solid #e8e9f0; border-radius: 10px; background: #fff; cursor: pointer; }
.audience-option:hover { border-color: #cbbcff; background: #fbfaff; }
.audience-option.unavailable { cursor: not-allowed; opacity: .52; background: #f7f7fa; }
.audience-option.unavailable:hover { border-color: #e8e9f0; background: #f7f7fa; }
.audience-option input { width: 15px; height: 15px; accent-color: var(--violet); }
.audience-option b, .audience-option small { display: block; }
.audience-option b { color: #263552; font-size: 12px; line-height: 1.2; }
.audience-option small { margin-top: 3px; color: #74809a; font-size: 10px; }
.audience-filter-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.audience-filter-columns > div > b { display: block; margin-bottom: 9px; color: #3c2a7f; font-size: 12px; }
.audience-preview { margin-top: 14px; padding: 14px 16px; border: 1px solid #dfeee4; border-radius: 12px; background: #fbfffc; }
.audience-preview .import-preview-head { margin-bottom: 4px; }
.audience-preview .form-note { margin: 6px 0 0; color: #60726b; }
.nomination-list-card { margin-top: 28px; }
.nomination-list-card .list-head { padding-bottom: 12px; border-bottom: 1px solid #e9ebf1; }
.nomination-list-card .list-head h3 { margin: 0; font: 700 22px var(--serif); letter-spacing: -.025em; }
.nomination-list-card .list-head .eyebrow { margin-bottom: 6px; }

/* Workforce import: employees are private directory records before they become users. */
.directory-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.directory-hero h2 { margin: 0 0 12px; }
.directory-hero > div > p:not(.eyebrow) { max-width: 630px; margin: 0; color: #62718b; line-height: 1.55; }
.directory-promise { display: flex; align-items: center; gap: 11px; min-width: 245px; padding: 14px; border: 1px solid #d8eddf; border-radius: 13px; background: #f7fcf8; }
.directory-promise > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #207044; background: #dff4e6; font-weight: 800; }
.directory-promise b, .directory-promise small { display: block; }
.directory-promise b { color: #235f3b; font-size: 12px; }
.directory-promise small { margin-top: 3px; color: #627b6b; font-size: 11px; line-height: 1.35; }
.directory-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 28px; }
.directory-value-grid article { min-height: 128px; padding: 20px; border: 1px solid #e3e6ef; border-radius: 14px; background: #fff; }
.directory-value-grid article:first-child { border-color: #dfd5ff; background: #faf8ff; }
.directory-value-grid span, .directory-value-grid b, .directory-value-grid small { display: block; }
.directory-value-grid span { margin-bottom: 16px; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.directory-value-grid b { color: #192847; font: 700 17px var(--serif); letter-spacing: -.02em; }
.directory-value-grid small { margin-top: 7px; color: #71809a; font-size: 12px; line-height: 1.45; }
.import-card { padding: 30px; border: 1px solid #dfd7ff; border-radius: 17px; background: linear-gradient(135deg, #fbfaff, #f3edff); box-shadow: 0 14px 32px #3720690c; }
.import-copy h3 { margin: 0 0 8px; color: #192847; font: 700 24px var(--serif); letter-spacing: -.025em; }
.import-copy > p:not(.eyebrow) { margin: 0; color: #697791; font-size: 13px; }
.file-picker { display: flex; align-items: center; gap: 13px; margin: 23px 0 0; padding: 18px; border: 1.5px dashed #bcaaff; border-radius: 13px; color: #392184; background: #fff; cursor: pointer; }
.file-picker:hover { border-color: var(--violet); background: #fdfcff; }
.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-picker .file-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--violet); font-size: 21px; font-weight: 700; }
.file-picker b, .file-picker small { display: block; }
.file-picker b { font-size: 13px; }
.file-picker small { margin-top: 4px; color: #74809a; font-size: 11px; }
.import-preview { margin-top: 18px; padding: 16px; border: 1px solid #e5e8ef; border-radius: 12px; background: #fff; }
.import-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.import-preview-head b { color: #243553; font-size: 13px; }
.import-preview-head span { padding: 5px 8px; border-radius: 20px; color: #257147; background: #e4f6ea; font-size: 10px; font-weight: 800; }
.import-preview table { width: 100%; border-collapse: collapse; color: #53617b; font-size: 12px; text-align: left; }
.import-preview th { padding: 7px 8px; color: #778199; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.import-preview td { padding: 8px; border-top: 1px solid #edf0f5; }
.import-actions { display: flex; align-items: center; gap: 16px; margin-top: 17px; }
.import-actions .button { margin: 0; }
.directory-list-card { margin-top: 28px; }
.directory-list-card .list-head { padding-bottom: 13px; border-bottom: 1px solid #e9ebf1; }
.directory-list-card .list-head h3 { margin: 0; font: 700 22px var(--serif); letter-spacing: -.025em; }
.directory-list-card .list-head h3 span { color: var(--violet); }
.directory-list-card .list-head .eyebrow { margin-bottom: 6px; }

@media (max-width: 850px) {
  .overview-hero { display: block; }
  .privacy-pill { width: fit-content; margin-top: 18px; }
  .today-grid { grid-template-columns: 1fr; }
  .overview-divider { align-items: flex-start; }
  .overview-divider::after { display: none; }
  .cycle-journey-head { display: block; }
  .journey-assurance { width: fit-content; margin-top: 18px; }
  .cycle-steps { grid-template-columns: 1fr; }
  .cycle-steps li { min-height: 0; padding: 13px 15px; border-top: 1px solid #e9ebf1; border-left: 0; }
  .cycle-steps li:first-child { border-top: 0; }
  .cycle-steps li.active::after { top: 0; right: auto; bottom: 0; left: 0; width: 3px; height: auto; }
  .cycle-steps span { display: inline; margin-right: 10px; }
  .cycle-steps b { display: inline; }
  .cycle-steps small { margin: 5px 0 0 31px; }
  .builder-stage { padding: 22px; }
  .stage-actions { display: block; }
  .audience-current-actions { display: block; }
  .audience-current-actions .button { width: 100%; margin-top: 12px; }
  .modal-actions { display: block; }
  .modal-actions .button { width: 100%; }
  .modal-actions .button + .button { margin-top: 10px; }
  .stage-actions small { display: block; margin-top: 12px; }
  .people-hero { display: block; }
  .anonymity-card { margin-top: 18px; }
  .people-flow { grid-template-columns: 1fr; }
  .audience-option-grid, .audience-filter-columns { grid-template-columns: 1fr; }
  .perspective-grid, .external-contact-grid { grid-template-columns: 1fr; }
  .external-row { display: block; }
  .external-row span { display: block; margin-top: 3px; text-align: left; }
  .people-flow article { min-height: 0; }
  .people-flow span { display: inline; margin-right: 10px; }
  .people-flow b { display: inline; }
  .people-flow small { margin: 6px 0 0 30px; }
  .directory-hero { display: block; }
  .directory-promise { width: fit-content; margin-top: 18px; }
  .directory-value-grid { grid-template-columns: 1fr; }
  .directory-value-grid article { min-height: 0; }
  .directory-value-grid span { display: inline; margin-right: 10px; }
  .directory-value-grid b { display: inline; }
  .directory-value-grid small { margin: 6px 0 0 30px; }
  .import-card { padding: 22px; }
  .import-actions { display: block; }
  .import-actions .text-button { display: block; margin-top: 12px; }
  .import-preview { overflow-x: auto; }
}

/* Orbit product-shell entry for Learning — real interactive tile states on
   top of the existing .product-chip badge, not a redesign of it. */
.product-chip.clickable {
  cursor: pointer;
  border: 0;
  font: 700 13px var(--sans);
  background: #f4f0ff;
  color: var(--violet);
  transition: background .15s, color .15s;
}
.product-chip.clickable:hover,
.product-chip.clickable:focus-visible {
  background: var(--violet);
  color: #fff;
}
.product-chip.disabled {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: default;
  color: var(--muted);
  opacity: .75;
}
.product-chip.disabled small {
  font-size: 11px;
  font-weight: 400;
  white-space: normal;
  max-width: 220px;
}

/* Action-plan goal editor: a plain stacked form inside each task-card. */
.action-goal-card label:first-child { margin-top: 0; }
.action-goal-card { display: flex; flex-direction: column; }
.action-goal-card .form-grid { margin-top: 0; }
.action-goal-card [data-remove-goal] { align-self: flex-start; margin-top: 12px; }