:root {
  --ink: #20282b;
  --muted: #75817e;
  --blue: #314fdf;
  --blue-dark: #263fba;
  --line: #e6e9e5;
  --paper: #f6f7f5;
  --green: #417a60;
  --font: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}
.demo-entry {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid #e1dce8;
  border-radius: 18px;
  box-shadow: 0 24px 80px #211a302e;
  color: #30273a;
}
.demo-entry::backdrop { background: #171322b8; }
.demo-entry-content { padding: clamp(24px, 6vw, 40px); }
.demo-entry-eyebrow { color: #705988; font: 700 11px var(--display); letter-spacing: .12em; }
.demo-entry h1 { margin: 12px 0 8px; font: 800 clamp(26px, 5vw, 34px)/1.15 var(--display); }
.demo-entry-content > p { color: #635b6d; }
.demo-entry-notice { margin: 20px 0; padding: 13px 15px; border-radius: 8px; background: #f4eff8; font-size: 13px; }
.demo-entry-steps { margin: 0; padding: 0; list-style: none; }
.demo-entry-steps li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #ebe6ef; }
.demo-entry-steps li > span { color: #705988; font-weight: 700; }
.demo-entry-steps li div { flex: 1; }
.demo-entry-steps strong, .demo-entry-steps small { display: block; }
.demo-entry-steps small { color: #70677b; }
.demo-entry-steps b { color: #705988; font-size: 11px; }
.demo-entry-status { min-height: 1.5em; font-size: 13px; }
.demo-entry-action { width: 100%; justify-content: center; }
.demo-entry-link { display: inline-block; margin-top: 20px; color: #543c72; font-weight: 700; text-decoration: underline; }
.demo-entry-footnote { margin-bottom: 0; font-size: 12px; }
.badge-lookup { margin-top: 20px; background: white; border: 1px solid var(--line); border-radius: 6px; padding: 25px; }
.badge-lookup h2 { font: 800 20px/1.3 var(--display); margin: 20px 0 7px; }
.badge-lookup p { color: #66776e; font-size: 13px; }
.badge-fields { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 14px; margin: 18px 0 14px; }
.badge-fields label { display: block; font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.badge-fields input, .badge-fields select { width: 100%; padding: 11px; border: 1px solid #b5c3b9; border-radius: 4px; background: #fbfcfa; font-size: 16px; }
.badge-lookup button:disabled { opacity: .5; cursor: wait; }
.badge-warning { max-width: 760px; margin: 18px 0 0; }
.badge-result { margin-top: 14px; padding: 12px; background: #eef3ed; color: #344e3e; border-radius: 4px; overflow-wrap: anywhere; }
@media (max-width: 520px) { .badge-fields { grid-template-columns: 1fr; } }
.verification-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.verification-main { display: grid; gap: 14px; }
.verification-panel { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.verification-number { color: var(--blue); font: 800 13px var(--display); }
.verification-number span { color: #788880; margin-left: 8px; font-size: 12px; }
.verification-panel h2, .verification-aside h2 { font: 800 20px/1.3 var(--display); margin: 14px 0 8px; }
.verification-panel p, .verification-aside p { color: #66776e; font-size: 13px; }
.verification-status { background: #f0f4ee; border-radius: 4px; padding: 12px; color: #455f4c; font-size: 12px; margin-top: 16px; overflow-wrap: anywhere; }
.verification-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.verification-footnote { font-size: 12px !important; margin-bottom: 0; }
.verification-panel button:disabled { opacity: .48; cursor: not-allowed; }
.verification-panel form label { display: block; font-weight: 700; margin: 15px 0 6px; }
.verification-panel form input, .verification-panel form textarea, .verification-panel form select { width: 100%; padding: 12px; border: 1px solid #b5c3b9; border-radius: 4px; font-size: 16px; }
.verification-panel form button { margin-top: 18px; }
.verification-panel details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.verification-panel summary { cursor: pointer; font-weight: 700; }
.rehearsal-item { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.rehearsal-item p { margin: 4px 0; }
.rehearsal-code { display: block; overflow-wrap: anywhere; user-select: all; font-weight: 700; }
.verification-aside { background: #e8eee8; border-radius: 6px; padding: 24px; }
.verification-aside .overline { margin-top: 20px; }
.verification-aside ul { list-style: none; padding: 0; }
.verification-aside li { border-top: 1px solid #d5e0d5; padding: 12px 0; }
.verification-aside li strong, .verification-aside li span { display: block; }
.verification-aside li span { color: #66776e; font-size: 12px; margin-top: 3px; }
@media (max-width: 800px) { .verification-grid { grid-template-columns: 1fr; } }
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  font: 14px/1.55 var(--font);
  color: var(--ink);
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #e77958;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  background: white;
  padding: 10px;
  z-index: 20;
}
.skip-link:focus {
  top: 1rem;
}
.app-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 29px 18px 19px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.brand-mark {
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font: 800 30px/0.95 var(--display);
  display: grid;
  place-items: center;
  position: relative;
  padding-bottom: 5px;
}
.brand-mark span {
  color: #ffc49c;
}
.brand-name {
  font: 800 19px/1 var(--display);
  letter-spacing: 0;
}
.brand-name > span {
  color: #7d8b91;
}
.brand-name small {
  display: block;
  color: #a6afac;
  font: 700 12px/1 var(--font);
  letter-spacing: 1px;
  margin-top: 6px;
}
.workspace-label,
.overline,
.panel-kicker,
.card-label,
.breadcrumb,
.feature-tag,
.feature-caption,
.demo-pill,
.section-intro,
.role-badge,
.explain-foot,
footer {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.workspace-label {
  display: flex;
  justify-content: space-between;
  color: #aab4ae;
  margin: 53px 10px 14px;
}
.workspace-label.secondary {
  margin: 19px 10px 10px;
}
.workspace-label span {
  color: #d0d6d1;
}
.navigation {
  display: grid;
  gap: 4px;
}
.nav-link {
  height: 42px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #7a8784;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 5px;
  text-align: left;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
}
.nav-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.nav-link:hover {
  background: #f6f7f5;
  color: var(--ink);
}
.nav-link.active {
  background: #eef1ff;
  color: var(--blue);
}
.nav-count {
  margin-left: auto;
  background: #e1e6ff;
  color: var(--blue);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
}
.nav-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 9px 0;
}
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-note {
  border-radius: 6px;
  padding: 17px 15px;
  background: #f3f5ef;
  display: flex;
  gap: 11px;
}
.note-icon {
  width: 29px;
  height: 29px;
  background: #e1e9d8;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #63846b;
  flex-shrink: 0;
}
.note-icon svg {
  width: 15px;
}
.sidebar-note p {
  margin: 0;
}
.sidebar-note strong {
  display: block;
  font: 700 13px/1.4 var(--display);
}
.sidebar-note p span {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: #93a096;
  margin-top: 7px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding: 18px 3px 0;
}
.avatar {
  height: 35px;
  width: 35px;
  background: #e7b6a1;
  color: #533b39;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}
.profile strong,
.profile small {
  display: block;
}
.profile strong {
  font-size: 12px;
}
.profile small {
  font-size: 12px;
  color: #a3ada7;
}
.profile > svg {
  width: 14px;
  margin-left: auto;
  color: #a1ada7;
}
.topbar {
  height: 66px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #abb4b0;
}
.breadcrumb svg {
  width: 12px;
}
.breadcrumb strong {
  color: #65736f;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.demo-pill {
  border-radius: 4px;
  background: #f1f5ee;
  color: #718d72;
  padding: 7px 8px;
  font-size: 12px;
}
.demo-pill span,
.overline-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #79a77b;
  margin-right: 5px;
}
.top-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7d8b86;
  font-size: 12px;
  font-weight: 600;
}
.top-location svg {
  width: 14px;
}
.avatar-small {
  height: 29px;
  width: 29px;
  font-size: 12px;
}
.page-content {
  max-width: 1450px;
  padding: 25px 42px 0;
  margin: auto;
}
.demo-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #728075;
  font-size: 12px;
  padding: 9px 11px;
  border: 1px solid #e2e8df;
  border-radius: 4px;
  background: #f1f5ee;
  margin-bottom: 25px;
}
.demo-notice svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 28px;
}
.overline {
  color: #9ba8a1;
}
.overline-dot {
  background: #7ab087;
}
.page-heading h1 {
  font: 800 31px/1.2 var(--display);
  margin: 10px 0 7px;
  letter-spacing: 0;
}
.page-heading p {
  color: #87938e;
  margin: 0;
  font-size: 13px;
}
.wave,
.title-spark {
  color: #ec9e7b;
}
.button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  border-radius: 5px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.button svg,
.text-link svg {
  width: 15px;
  height: 15px;
}
.button.primary {
  background: var(--blue);
  color: #fff;
}
.button.primary:hover {
  background: var(--blue-dark);
}
.button.white {
  background: #fff;
  color: #2d4850;
}
.button.subtle {
  background: #f0f3f0;
  color: #586b62;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 23px;
}
.feature-panel {
  min-height: 254px;
  background: #c9ddd1;
  position: relative;
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
  border-radius: 6px;
}
.feature-copy {
  z-index: 1;
  padding: 29px 31px;
  align-self: center;
}
.feature-tag {
  color: #668376;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.feature-tag svg {
  width: 14px;
}
.feature-copy h2 {
  font: 800 32px/1.18 var(--display);
  letter-spacing: 0;
  margin: 17px 0 11px;
  color: #263f37;
}
.feature-copy h2 em {
  font-style: normal;
  color: #668b75;
}
.feature-copy p {
  color: #647d70;
  font-size: 12px;
  max-width: 290px;
  margin-bottom: 20px;
}
.feature-photo {
  background: #aac9b5
    url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=900&q=80")
    center/cover no-repeat;
}
.feature-caption {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: #fff;
  color: #899a8d;
  font-size: 12px;
  padding: 11px 12px;
  border-radius: 4px;
}
.feature-caption span {
  color: #d47e66;
  font-size: 13px;
  margin-left: 9px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 15px;
  margin: 37px 0 15px;
}
.section-title h2,
.side-heading h2 {
  font: 800 19px/1.3 var(--display);
  margin: 7px 0 0;
}
.text-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.text-link:hover {
  text-decoration: underline;
}
.project-list {
  display: grid;
  gap: 9px;
}
.project-card {
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 6px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.project-icon {
  height: 47px;
  width: 47px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.project-icon svg {
  width: 22px;
}
.project-icon.peach {
  background: #faeee8;
  color: #cf8269;
}
.project-icon.lilac {
  background: #edeeff;
  color: #7e87c6;
}
.project-icon.mint {
  background: #e5f1ea;
  color: #6b9c7d;
}
.project-body {
  min-width: 0;
  flex: 1;
}
.project-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9daaa2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.project-body h3 {
  font: 700 14px/1.3 var(--display);
  margin: 5px 0;
}
.project-body p {
  color: #8e9b94;
  font-size: 12px;
  margin: 0;
}
.project-arrow,
.icon-button {
  width: 33px;
  height: 33px;
  border: 1px solid #e9eee9;
  border-radius: 5px;
  background: #fff;
  color: #82948a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.project-arrow svg,
.icon-button svg {
  width: 15px;
  height: 15px;
}
.how-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  border: 1px solid #e4e9df;
  border-radius: 6px;
  background: #f0f4eb;
  padding: 15px;
}
.how-symbol {
  background: #e2ebdc;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #719177;
  flex-shrink: 0;
}
.how-symbol svg {
  width: 18px;
}
.how-strip strong {
  font: 700 12px var(--display);
}
.how-strip p {
  color: #95a295;
  margin: 1px 0 0;
  font-size: 12px;
}
.how-strip .text-link {
  margin-left: auto;
  white-space: nowrap;
}
.impact-panel {
  background: #343e58;
  color: white;
  border-radius: 6px;
  padding: 22px;
}
.panel-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #afb9c9;
}
.panel-kicker > span {
  color: #b6cba3;
  font-size: 19px;
}
.panel-kicker svg {
  width: 17px;
}
.impact-number {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
}
.impact-number strong {
  font: 700 49px/1 var(--display);
}
.impact-number span {
  color: #c1cad5;
  font-size: 12px;
  line-height: 1.4;
}
.impact-panel > p {
  color: #aab6c4;
  font-size: 12px;
  margin: 10px 0 19px;
}
.impact-rule {
  height: 1px;
  background: #59647c;
  margin-bottom: 13px;
}
.impact-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
}
.impact-detail span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b8c2ce;
}
.impact-detail svg {
  width: 14px;
  height: 14px;
  color: #9ecba5;
}
.impact-detail strong {
  font-size: 12px;
}
.side-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 33px 0 13px;
}
.side-heading h2 {
  font-size: 16px;
}
.credential-mini {
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 6px;
  padding: 17px;
}
.credential-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.badge-symbol {
  width: 37px;
  height: 37px;
  background: #f7e9dd;
  color: #c9855e;
  border-radius: 5px;
  display: grid;
  place-items: center;
}
.badge-symbol svg {
  width: 19px;
}
.verified {
  color: #558d68;
  background: #ecf6ed;
  border-radius: 3px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.verified svg {
  width: 12px;
  height: 12px;
}
.verified.invalid {
  background: #fff0eb;
  color: #ad5440;
}
.credential-mini h3 {
  font: 700 14px/1.4 var(--display);
  margin: 15px 0 5px;
}
.credential-mini p {
  color: #93a099;
  font-size: 12px;
  margin: 0 0 14px;
}
.credential-mini .text-link {
  border-top: 1px solid var(--line);
  width: 100%;
  padding-top: 12px;
}
.lens-promo {
  background: #eef0fa;
  border-radius: 6px;
  margin-top: 15px;
  padding: 17px;
  display: flex;
  gap: 12px;
}
.lens-icon {
  background: #dce1fa;
  color: #6678bf;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lens-icon svg {
  width: 17px;
}
.lens-promo .overline {
  font-size: 12px;
  color: #909dc1;
}
.lens-promo h3 {
  font: 700 13px/1.35 var(--display);
  margin: 8px 0 5px;
}
.lens-promo p {
  font-size: 12px;
  color: #8b96ac;
  margin: 0 0 10px;
}
.lens-promo .text-link {
  font-size: 12px;
}
.section-intro {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9ca9a2;
  margin-bottom: 13px;
}
.section-intro span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.section-intro svg {
  width: 13px;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.projects-grid .project-card {
  align-items: flex-start;
  min-height: 180px;
}
.projects-grid .project-body h3 {
  font-size: 17px;
  margin: 10px 0;
}
.projects-grid .project-body p {
  font-size: 12px;
  line-height: 1.6;
}
.skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.skill-chip {
  background: #f2f5f1;
  border-radius: 3px;
  color: #6f8373;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 7px;
}
.inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 13px;
  background: #eef3ed;
  color: #708579;
  border-radius: 5px;
  font-size: 12px;
}
.inline-note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.credentials-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}
.credential-full {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 23px;
  margin-bottom: 12px;
}
.credential-full-top {
  display: flex;
  align-items: center;
  gap: 13px;
}
.credential-full-top > div {
  flex: 1;
}
.credential-full-top h3 {
  font: 800 17px/1.4 var(--display);
  margin: 0 0 4px;
}
.credential-full-top p {
  color: #90a099;
  font-size: 12px;
  margin: 0;
}
.credential-quote {
  background: #f7f8f5;
  border-left: 3px solid #bacfb7;
  padding: 15px;
  margin: 18px 0;
  color: #55685d;
  font-size: 13px;
  line-height: 1.6;
}
.credential-quote strong {
  display: block;
  color: #9aa99d;
  font-size: 12px;
  margin-top: 7px;
}
.credential-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.explain-panel {
  align-self: start;
  background: #e8eee8;
  border-radius: 6px;
  padding: 24px;
  color: #354b3f;
}
.explain-panel .panel-kicker {
  color: #85998a;
}
.explain-panel h2,
.vouch-aside h2 {
  font: 800 24px/1.25 var(--display);
  margin: 22px 0 11px;
}
.explain-panel p,
.vouch-aside p {
  color: #748b7a;
  font-size: 12px;
  line-height: 1.7;
}
.explain-panel ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.explain-panel li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 11px 0;
}
.explain-panel li svg {
  width: 15px;
  color: #689473;
}
.explain-foot {
  border-top: 1px solid #d5e0d5;
  padding-top: 16px;
  color: #8ba08e;
}
.lens-layout,
.vouch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.lens-input,
.lens-output,
.vouch-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 25px;
}
.card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a0ada5;
}
.card-label svg {
  width: 16px;
}
.lens-input h2,
.vouch-form h2 {
  font: 800 21px/1.3 var(--display);
  margin: 22px 0 7px;
}
.lens-input > p,
.vouch-form > p {
  color: #8e9d94;
  font-size: 12px;
  margin-bottom: 22px;
}
.lens-input label,
.verify-box label {
  display: block;
  color: #8a9a91;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 9px;
}
.lens-input textarea,
.vouch-form textarea,
.vouch-form input[type="text"],
.vouch-form select,
.verify-box textarea {
  display: block;
  width: 100%;
  border: 1px solid #d9e1d9;
  border-radius: 4px;
  background: #fbfcfa;
  color: var(--ink);
  padding: 12px;
  font-size: 14px;
  resize: vertical;
}
.lens-input textarea {
  min-height: 200px;
}
.lens-buttons,
.verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.lens-disclaimer {
  display: flex;
  gap: 7px;
  color: #99a79d;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 19px;
}
.lens-disclaimer svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.lens-output {
  min-height: 420px;
}
.output-dot {
  font-size: 12px;
  color: #7fac87;
}
.lens-empty {
  text-align: center;
  padding: 80px 20px;
}
.lens-empty > span {
  width: 54px;
  height: 54px;
  background: #edf0fd;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  color: #7182c4;
}
.lens-empty > span svg {
  width: 24px;
}
.lens-empty h2 {
  font: 700 17px var(--display);
  margin: 0 0 5px;
}
.lens-empty p {
  color: #9aa79f;
  font-size: 12px;
}
.lens-result {
  border-top: 1px solid var(--line);
  padding: 17px 0;
}
.lens-result:first-child {
  margin-top: 20px;
}
.lens-result-top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.result-status {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #eaf5eb;
  border-radius: 50%;
  color: #568b67;
}
.result-status.gap {
  background: #f1f2ef;
  color: #a3ada5;
}
.result-status svg {
  width: 14px;
}
.lens-result h3 {
  font: 700 13px/1.5 var(--display);
  margin: 2px 0 5px;
}
.result-desc {
  color: #84948a;
  font-size: 12px;
  margin: 0 0 8px 34px;
}
.lens-result .text-link {
  margin-left: 34px;
}
.share-link { overflow-wrap: anywhere; }
#share-qr { max-width: 100%; height: auto; }
.share-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share-platforms .button { text-decoration: none; }
.share-hint { font-size: 13px; line-height: 1.5; color: #655b70; }
#linkedin-image-preview { max-width: 320px; width: 100%; height: auto; }
#linkedin-caption { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: #f7f4f9; padding: 12px; }
.role-badge {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #7589a2;
  background: #eaf0f6;
  padding: 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.role-badge svg {
  width: 14px;
}
.vouch-form > label,
.label-row > label,
.vouch-form legend {
  display: block;
  font: 700 13px var(--display);
  margin: 18px 0 8px;
}
.vouch-form input[type="text"],
.vouch-form select,
.vouch-form textarea {
  font-size: 16px;
}
.vouch-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.vouch-form legend {
  padding: 0;
}
.field-hint {
  font-size: 12px !important;
  color: #99a79d !important;
  margin: 8px 0 !important;
}
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.voice-button {
  border: 0;
  background: #eef1ff;
  color: var(--blue);
  border-radius: 4px;
  padding: 8px 11px;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.voice-button svg {
  width: 14px;
}
.skill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.skill-options label {
  background: #f4f6f3;
  padding: 8px;
  border-radius: 4px;
  color: #5d7064;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.skill-options input,
.confirm-check input {
  accent-color: var(--blue);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.vouch-form .confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 500 12px/1.5 var(--font);
  color: #64746a;
}
.compact {
  margin: 12px 0;
}
.submit-vouch {
  width: 100%;
  margin-top: 8px;
  min-height: 49px;
}
.form-error {
  color: #a7432d !important;
}
.vouch-aside {
  background: #e7eee6;
  padding: 30px;
  border-radius: 6px;
  align-self: start;
  color: #3b5547;
}
.large-quote {
  font:
    800 70px/0.8 Georgia,
    serif;
  color: #adc9aa;
}
.vouch-aside h2 {
  max-width: 300px;
}
.vouch-aside p {
  max-width: 330px;
}
.aside-steps {
  border-top: 1px solid #cfddcf;
  margin-top: 27px;
}
.aside-steps div {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid #cfddcf;
  padding: 14px 0;
  font-weight: 700;
  font-size: 12px;
}
.aside-steps div span {
  color: #93ad94;
  font-size: 12px;
}
.aside-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #78947e;
  font-size: 12px;
  margin-top: 24px;
}
.aside-bottom svg {
  width: 16px;
}
footer {
  min-height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #b4beb7;
  font-size: 12px;
}
.footer-star {
  color: #e49d80;
  margin: 0 7px;
}
dialog {
  border: 0;
  border-radius: 7px;
  width: min(650px, calc(100% - 32px));
  max-height: 90vh;
  padding: 25px;
  color: var(--ink);
  box-shadow: 0 20px 70px #1c29243b;
}
dialog:modal {
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: #26332ecc;
  overflow: hidden;
  overscroll-behavior: contain;
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.dialog-header h2 {
  font: 800 22px var(--display);
  margin: 8px 0 20px;
}
.dialog-detail {
  background: #f5f7f4;
  padding: 18px;
  border-radius: 4px;
}
.dialog-detail h3 {
  font: 700 16px var(--display);
  margin: 0 0 5px;
}
.dialog-detail p {
  font-size: 12px;
  color: #7d8f83;
  margin: 6px 0;
}
.verify-box {
  margin-top: 23px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.verify-box strong {
  font: 700 14px var(--display);
}
.verify-box p {
  font-size: 12px;
  color: #8c9a90;
}
.verify-box textarea {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}
.verify-box #verify-result {
  font-weight: 700;
  font-size: 12px;
}
.verify-box #verify-result[data-status="invalid"] {
  color: #b42318;
}
.verify-box #verify-result[data-status="verified"] {
  color: #287044;
}
.verify-box #verify-result[data-status="pending"],
.verify-box #verify-result[data-status="unavailable"] {
  color: #667085;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .page-content {
    padding-left: 28px;
    padding-right: 28px;
  }
  .topbar {
    padding: 0 28px;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .feature-copy h2 {
    font-size: 26px;
  }
  .credentials-layout {
    grid-template-columns: 1fr 250px;
  }
}
@media (max-width: 800px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: static;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar > .workspace-label,
  .sidebar-bottom,
  .nav-divider,
  .workspace-label.secondary {
    display: none;
  }
  .navigation {
    display: flex;
    overflow-x: auto;
    margin-top: 13px;
    gap: 4px;
  }
  .nav-link {
    width: auto;
    white-space: nowrap;
    padding: 0 10px;
    min-width: max-content;
  }
  .topbar {
    height: 52px;
    padding: 0 18px;
  }
  .top-actions {
    gap: 10px;
  }
  .top-location {
    display: none;
  }
  .page-content {
    padding: 18px 18px 0;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .right-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  .impact-panel {
    grid-row: span 2;
  }
  .side-heading {
    margin: 0;
  }
  .lens-promo {
    margin: 0;
    grid-column: span 2;
  }
  .feature-copy h2 {
    font-size: 27px;
  }
  .credentials-layout {
    grid-template-columns: 1fr;
  }
  .explain-panel {
    max-width: none;
  }
  .lens-layout,
  .vouch-layout {
    grid-template-columns: 1fr;
  }
  .vouch-aside {
    order: -1;
  }
  .vouch-aside h2 {
    margin: 10px 0;
  }
  .aside-steps,
  .aside-bottom {
    display: none;
  }
}
@media (max-width: 520px) {
  .page-heading {
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }
  .page-heading h1 {
    font-size: 27px;
  }
  .page-heading > .button {
    width: 100%;
  }
  .demo-notice {
    font-size: 12px;
  }
  .feature-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .feature-copy {
    padding: 25px;
  }
  .feature-photo {
    min-height: 165px;
  }
  .feature-caption {
    bottom: 12px;
  }
  .section-title h2 {
    font-size: 17px;
  }
  .project-card {
    padding: 13px;
    gap: 10px;
  }
  .project-icon {
    width: 40px;
    height: 40px;
  }
  .project-body h3 {
    font-size: 13px;
  }
  .how-strip {
    flex-wrap: wrap;
  }
  .how-strip .text-link {
    margin-left: 48px;
  }
  .right-column {
    grid-template-columns: 1fr;
  }
  .impact-panel {
    grid-row: auto;
  }
  .side-heading {
    margin: 14px 0 0;
  }
  .lens-promo {
    grid-column: auto;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .credential-full {
    padding: 17px;
  }
  .credential-full-top {
    align-items: start;
    flex-wrap: wrap;
  }
  .credential-full-top > div {
    min-width: 60%;
  }
  .credential-actions {
    align-items: start;
    gap: 12px;
    flex-direction: column;
  }
  .lens-input,
  .lens-output,
  .vouch-form {
    padding: 19px;
  }
  .verify-actions .button {
    flex: 1;
  }
  footer {
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Editorial visual system */
:root {
  --ink: #1d302d;
  --muted: #596c65;
  --blue: #255649;
  --blue-dark: #193e35;
  --line: #e2e4dc;
  --paper: #f4f2ec;
  --green: #376d57;
  --serif: "DM Serif Display", Georgia, serif;
}

body {
  background: var(--paper);
  color: var(--ink);
}
.sidebar {
  background: #fbfaf6;
  border-color: #e5e4dc;
}
.brand-mark {
  background: #1e493e;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark span { color: #e9c78b; }
.brand-name { letter-spacing: -.05em; font-size: 21px; }
.brand-name small { color: #687970; letter-spacing: 1.15px; }
.workspace-label, .overline, .section-intro { color: #60736a; }
.nav-link {
  border-radius: 9px;
  color: #556961;
  font-size: 13px;
}
.nav-link.active {
  background: #e3ede6;
  color: #224f40;
}
.nav-link:hover { background: #f0f3ec; }
.nav-count { background: #d3e2d6; color: #234f40; }
.sidebar-note { background: #edf2e8; border: 1px solid #e4e9de; border-radius: 12px; }
.sidebar-note p span, .profile small { color: #61736a; }
.avatar { background: #e7d2bd; color: #55463a; }
.topbar {
  background: rgba(251, 250, 246, .94);
  border-color: #e5e4dc;
}
.breadcrumb { color: #6b7b72; }
.breadcrumb strong { color: #2e4e41; }
.demo-pill {
  border: 1px solid #dfe9de;
  border-radius: 999px;
  background: #edf3eb;
  color: #43664c;
  padding: 8px 11px;
}
.page-content { padding-top: 28px; }
.demo-notice {
  background: #eef2e9;
  border-color: #dce5d8;
  border-radius: 9px;
  color: #405d4c;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
}
.page-heading h1 {
  font: 400 clamp(32px, 3.1vw, 44px)/1.08 var(--serif);
  letter-spacing: -.025em;
}
.page-heading p { color: #5b6d64; font-size: 14px; }
.wave, .title-spark { color: #b48b55; }
.button {
  min-height: 46px;
  border-radius: 8px;
  font-size: 12px;
  padding: 0 18px;
}
.button.primary { background: #255649; }
.button.primary:hover { background: #193e35; }
.button.white { background: #faf8f1; color: #234b3d; }
.button.subtle { background: #edf1eb; color: #3e5b4b; }
.button:disabled { cursor: not-allowed; }
.text-link { color: #285d49; font-size: 12px; }

.journey {
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 20px 24px;
  border: 1px solid #e3e3da;
  border-radius: 14px;
  background: #fbfaf6;
  box-shadow: 0 8px 24px rgba(37, 55, 45, .035);
}
.journey-intro h2 {
  margin: 7px 0 0;
  max-width: 260px;
  font: 400 21px/1.2 var(--serif);
}
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 5px 13px;
  border: 0;
  border-left: 1px solid #e8e9df;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.journey-number { color: #9c794b; font: 700 12px/1.6 var(--display); }
.journey-step strong, .journey-step small { display: block; }
.journey-step strong { font: 700 12px/1.4 var(--display); }
.journey-step small { margin-top: 4px; color: #64746b; font-size: 12px; line-height: 1.4; }
.journey-step > svg { width: 14px; height: 14px; flex-shrink: 0; margin-left: auto; color: #789182; }
.journey-step:hover strong { color: #397454; }

.feature-panel {
  min-height: 295px;
  border-radius: 14px;
  background: #214a3d;
  box-shadow: 0 14px 36px rgba(32, 63, 47, .12);
}
.feature-copy { padding: 34px 36px; }
.feature-tag { color: #d7dbc3; letter-spacing: 1.1px; }
.feature-copy h2 {
  margin-top: 18px;
  color: #fffdf6;
  font: 400 clamp(32px, 3vw, 44px)/1.05 var(--serif);
  letter-spacing: -.02em;
}
.feature-copy h2 em { color: #e8cb97; font-style: italic; }
.feature-copy p { color: #e0e9dd; font-size: 13px; line-height: 1.7; }
.feature-photo { position: relative; }
.feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33, 74, 61, .4), transparent 55%);
}
.feature-caption {
  z-index: 1;
  border-radius: 7px;
  color: #486b58;
  background: #faf9f2;
}
.section-title h2, .side-heading h2 {
  font: 400 25px/1.2 var(--serif);
  letter-spacing: -.01em;
}
.side-heading h2 { font-size: 21px; }
.project-card, .credential-mini, .credential-full,
.lens-input, .lens-output, .vouch-form, .verification-panel, .badge-lookup {
  background: #fffefa;
  border: 1px solid #e4e7de;
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(40, 55, 44, .035);
}
.project-card { padding: 19px; }
.project-body h3 { font-size: 15px; color: #223b31; }
.project-body p, .credential-mini p { color: #60746a; font-size: 12px; line-height: 1.6; }
.project-meta { color: #62796a; }
.project-arrow, .icon-button { border-color: #dce5da; border-radius: 8px; color: #426851; }
.skill-chip { background: #eef3eb; color: #41604a; border-radius: 5px; }
.how-strip { background: #eaf1e7; border-radius: 12px; }
.how-strip p { color: #5d7663; font-size: 12px; }
.impact-panel {
  background: linear-gradient(145deg, #253f38, #172f2b);
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 14px 32px rgba(29, 55, 43, .12);
}
.impact-panel .panel-kicker { color: #d3dfd1; }
.impact-number strong { font: 400 56px/1 var(--serif); color: #fffdf5; }
.impact-number span, .impact-panel > p, .impact-detail span { color: #d2dfd3; }
.impact-panel > p { font-size: 12px; }
.impact-rule { background: rgba(225, 236, 219, .22); }
.lens-promo { background: #e8ede7; border: 1px solid #dde7dd; border-radius: 12px; }
.lens-icon { background: #d9e7da; color: #416b52; }
.lens-promo .overline, .lens-promo p { color: #5d7464; }
.explain-panel, .vouch-aside, .verification-aside { background: #e5eee4; border-radius: 12px; }
.explain-panel p, .vouch-aside p, .verification-aside p { color: #4c6855; }
.explain-panel h2, .vouch-aside h2 { font: 400 29px/1.15 var(--serif); }
.lens-input h2, .vouch-form h2, .verification-panel h2, .badge-lookup h2 {
  font: 400 25px/1.2 var(--serif);
}
.lens-input > p, .vouch-form > p, .verification-panel p, .badge-lookup p { color: #5a6e62; font-size: 13px; }
.lens-input textarea, .vouch-form textarea, .vouch-form input[type="text"],
.vouch-form select, .verify-box textarea, .verification-panel form input,
.badge-fields input, .badge-fields select {
  border: 1px solid #cbd8cc;
  border-radius: 8px;
  background: #fcfdf9;
}
.verification-status, .badge-result { background: #edf3e9; border-radius: 8px; color: #395846; }
.role-badge { background: #e6eee6; color: #42634d; border-radius: 8px; }
dialog { border-radius: 14px; box-shadow: 0 24px 80px rgba(20, 40, 30, .28); }
dialog::backdrop { background: rgba(22, 38, 31, .75); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid #ae7331;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .button, .nav-link, .project-card, .project-arrow, .icon-button, .journey-step {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
      box-shadow .2s ease, transform .2s ease;
  }
  .button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(34, 69, 50, .14); }
  .project-card:hover { transform: translateY(-3px); border-color: #cad9ca; box-shadow: 0 12px 28px rgba(40, 65, 45, .09); }
  .project-arrow:hover, .icon-button:hover { background: #eaf2e9; transform: translateY(-2px); }
  .view:not([hidden]) { animation: view-enter .3s ease both; }
  @keyframes view-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 1100px) {
  .journey { grid-template-columns: 1fr; gap: 16px; }
  .journey-intro h2 { max-width: none; }
  .journey-step:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 800px) {
  .navigation { padding-bottom: 5px; scroll-snap-type: x proximity; }
  .nav-link { scroll-snap-align: start; }
  .vouch-aside { order: 0; }
}
@media (max-width: 520px) {
  .journey { padding: 18px; }
  .journey-steps { grid-template-columns: 1fr; gap: 0; }
  .journey-step, .journey-step:first-child { padding: 11px 0; border-left: 0; border-top: 1px solid #e8e9df; }
  .journey-step small { margin-top: 2px; }
  .feature-copy { padding: 28px 25px; }
  .feature-photo { min-height: 180px; }
  .feature-photo::after { background: linear-gradient(180deg, rgba(33, 74, 61, .2), transparent 55%); }
  .section-title h2 { font-size: 21px; }
  .project-card { padding: 15px; }
}

/* Lavender, ink, and warm white */
:root {
  --ink: #302941;
  --muted: #625c70;
  --blue: #59458e;
  --blue-dark: #44346f;
  --line: #e7e1ed;
  --paper: #f8f6fa;
  --green: #59458e;
  --surface: #fffcfa;
  --tint: #f0ebf7;
  --tint-strong: #e4dcf0;
}
.sidebar { background: var(--surface); border-color: var(--line); }
.brand-mark { background: var(--blue); }
.brand-mark span { color: #e1d6f1; }
.brand-name small, .workspace-label, .overline, .section-intro { color: #655b76; }
.nav-link { color: #5d5669; }
.nav-link.active { background: var(--tint-strong); color: var(--blue-dark); }
.nav-link:hover { background: var(--tint); }
.nav-count { background: #d7cce8; color: var(--blue-dark); }
.sidebar-note { background: var(--tint); border-color: var(--line); }
.sidebar-note p span, .profile small { color: var(--muted); }
.note-icon, .avatar { background: var(--tint-strong); color: var(--blue-dark); }
.topbar { background: rgba(255, 252, 250, .96); border-color: var(--line); }
.breadcrumb { color: #6e6577; }
.breadcrumb strong { color: #4d455b; }
.demo-pill, .demo-notice, .inline-note {
  background: var(--tint);
  border-color: #e1d9eb;
  color: #554b68;
}
.demo-pill span, .overline-dot { background: #7862a0; }
.page-heading p { color: var(--muted); }
.wave, .title-spark { color: #8571a7; }
.button.primary { background: var(--blue); }
.button.primary:hover { background: var(--blue-dark); }
.button.white { background: var(--surface); color: var(--blue-dark); }
.button.subtle { background: var(--tint); color: var(--blue-dark); }
.text-link { color: var(--blue); }
.journey { background: var(--surface); border-color: var(--line); box-shadow: 0 8px 24px rgba(79, 62, 103, .05); }
.journey-step { border-color: var(--line); }
.journey-number, .journey-step > svg { color: #725c96; }
.journey-step small { color: var(--muted); }
.journey-step:hover strong { color: var(--blue); }
.feature-panel { background: #e8e0f2; box-shadow: 0 14px 36px rgba(79, 62, 103, .1); }
.feature-tag { color: #605173; }
.feature-copy h2 { color: var(--ink); }
.feature-copy h2 em { color: #6a538c; }
.feature-copy p { color: #51475f; }
.feature-photo::after { background: linear-gradient(90deg, rgba(232, 224, 242, .35), transparent 55%); }
.feature-caption { background: var(--surface); color: #574965; }
.feature-caption span, .footer-star { color: #806b9c; }
.project-card, .credential-mini, .credential-full,
.lens-input, .lens-output, .vouch-form, .verification-panel, .badge-lookup {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 5px 18px rgba(79, 62, 103, .045);
}
.project-body h3 { color: var(--ink); }
.project-body p, .credential-mini p, .project-meta { color: var(--muted); }
.project-arrow, .icon-button { border-color: #ddd4e8; color: var(--blue); }
.project-icon.peach, .project-icon.lilac, .project-icon.mint,
.badge-symbol, .lens-icon, .how-symbol {
  background: var(--tint-strong);
  color: var(--blue);
}
.skill-chip, .skill-options label { background: var(--tint); color: #51436d; }
.skill-options label:has(input:checked) { background: var(--tint-strong); color: var(--blue-dark); }
.how-strip { background: var(--tint); border-color: var(--line); }
.how-strip p { color: var(--muted); }
.impact-panel {
  color: var(--ink);
  background: linear-gradient(145deg, #f1eaf7, #e6deef);
  box-shadow: 0 14px 32px rgba(79, 62, 103, .08);
}
.impact-panel .panel-kicker, .impact-number span, .impact-panel > p,
.impact-detail span { color: #594e61; }
.impact-panel .panel-kicker > span, .impact-detail svg { color: #725c96; }
.impact-number strong { color: var(--ink); }
.impact-rule { background: #d5c9e2; }
.lens-promo, .explain-panel, .vouch-aside, .verification-aside {
  background: var(--tint);
  border-color: var(--line);
  color: var(--ink);
}
.lens-promo .overline, .lens-promo p, .explain-panel p,
.vouch-aside p, .verification-aside p, .verification-aside li span,
.lens-input > p, .vouch-form > p, .verification-panel p, .badge-lookup p {
  color: var(--muted);
}
.large-quote, .aside-steps div span, .aside-bottom,
.explain-panel li svg, .explain-panel .panel-kicker, .explain-foot { color: #75618f; }
.aside-steps, .aside-steps div, .explain-foot, .verification-aside li { border-color: #ded4e8; }
.card-label, .lens-input label, .verify-box label { color: #655b70; }
.field-hint, .lens-disclaimer, .result-desc { color: #625a6c !important; }
.credential-quote, .dialog-detail { background: #f5f1f8; border-color: #a898c0; color: #51485b; }
.credential-quote strong, .dialog-detail p { color: #63586b; }
.verified, .result-status { background: #eae4f3; color: #51416f; }
.verified.invalid, .form-error { color: #a7432d !important; }
.result-status.gap { background: #eeeaf0; color: #5e5665; }
.lens-empty > span, .voice-button { background: var(--tint); color: var(--blue); }
.lens-empty p { color: var(--muted); }
.output-dot { color: var(--blue); }
.lens-input textarea, .vouch-form textarea, .vouch-form input[type="text"],
.vouch-form select, .verify-box textarea, .verification-panel form input,
.badge-fields input, .badge-fields select { border-color: #d8d0e0; background: #fdfbfe; }
.verification-status, .badge-result { background: var(--tint); color: #504460; }
.role-badge { background: var(--tint); color: #51436d; }
.vouch-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.verification-panel, .badge-lookup, .lens-input, .lens-output, .vouch-form { padding: clamp(20px, 2.2vw, 32px); }
.verification-panel h2, .badge-lookup h2 { color: var(--ink); }
.verification-number { color: var(--blue); }
.verification-number span { color: var(--muted); }
footer { color: #6e6577; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline-color: #6d509f; }
@media (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover { box-shadow: 0 6px 16px rgba(89, 65, 138, .16); }
  .project-card:hover { border-color: #d6c9e8; box-shadow: 0 12px 28px rgba(89, 65, 138, .1); }
  .project-arrow:hover, .icon-button:hover { background: var(--tint); }
  .journey-step > svg, .button svg, .text-link svg { transition: transform .2s ease; }
  .journey-step:hover > svg, .button:hover svg, .text-link:hover svg { transform: translate(3px, -2px); }
  dialog[open] { animation: dialog-enter .22s ease-out both; }
  @keyframes dialog-enter {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (max-width: 800px) {
  .vouch-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .feature-photo::after { background: linear-gradient(180deg, rgba(232, 224, 242, .2), transparent 55%); }
}

/* Easy (kiosk) mode: one question per screen, 24px+ text, large touch targets. */
.kiosk-entry {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 0;
  padding: 14px 16px; border: 2px solid var(--blue); border-radius: 12px;
  background: var(--tint); color: var(--blue-dark); font-weight: 700; font-size: 16px;
  text-align: left; cursor: pointer;
}
.kiosk-entry svg { width: 22px; height: 22px; flex: none; }
body.kiosk-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
body.kiosk-mode .sidebar,
body.kiosk-mode .topbar,
body.kiosk-mode footer { display: none; }
.kiosk-shell { max-width: 820px; margin: 0 auto; padding: 8px 0 48px; font-size: 24px; line-height: 1.45; color: var(--ink); }
.kiosk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.kiosk-progress { margin: 0; font-size: 20px; font-weight: 700; color: var(--muted); }
.kiosk-exit { min-height: 48px; padding: 0 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.kiosk h1 { font: 800 clamp(32px, 4.6vw, 48px)/1.15 var(--display); color: var(--ink); margin: 0 0 14px; }
.kiosk h1:focus { outline: none; }
.kiosk-hint { font-size: 24px; color: var(--muted); margin: 0 0 28px; }
.kiosk-choices { display: grid; gap: 14px; }
.kiosk-choices.skills { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 8px; }
.kiosk-choice {
  display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 18px 22px;
  border: 3px solid var(--line); border-radius: 16px; background: var(--surface);
  color: var(--ink); font-size: 24px; font-weight: 700; text-align: left; cursor: pointer;
}
.kiosk-choice[aria-pressed="true"] { border-color: var(--blue); background: var(--tint); }
.kiosk-choice[aria-pressed="true"] .kiosk-choice-title::before { content: "✓ "; color: var(--blue); }
.kiosk-choice-meta { font-size: 18px; font-weight: 500; color: var(--muted); }
.kiosk-input {
  display: block; width: 100%; padding: 18px 20px; border: 3px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); font-size: 26px; line-height: 1.4;
}
.kiosk-input:focus { border-color: var(--blue); }
.kiosk-mic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 200px; height: 200px; margin: 0 auto 28px; border: none; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 28px rgba(89, 69, 142, .28);
}
.kiosk-mic svg { width: 64px; height: 64px; }
.kiosk-mic[aria-pressed="true"] { background: #a3132e; box-shadow: 0 0 0 12px rgba(163, 19, 46, .18); }
.kiosk-or { display: block; font-size: 22px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.kiosk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 30px; }
.kiosk-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 72px; padding: 0 30px; border-radius: 16px; font-size: 24px; font-weight: 800; cursor: pointer;
}
.kiosk-button svg { width: 28px; height: 28px; }
.kiosk-button.primary { background: var(--blue); color: #fff; border: 3px solid var(--blue); }
.kiosk-button.secondary { background: var(--surface); color: var(--ink); border: 3px solid var(--line); }
.kiosk-button.wide { width: 100%; margin-top: 8px; }
.kiosk-actions .kiosk-button.secondary:first-child { margin-right: auto; }
.kiosk-readback { display: grid; gap: 18px; }
.kiosk-readback-item { padding: 20px 24px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); }
.kiosk-readback-question { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--muted); }
.kiosk-readback blockquote { margin: 0 0 8px; font: 600 30px/1.4 var(--font); color: var(--ink); }
.kiosk-link { min-height: 48px; padding: 0; border: none; background: none; color: var(--blue-dark); font-size: 20px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.kiosk-consent { font-size: 20px; color: var(--ink); margin: 24px 0 0; }
.kiosk-status { min-height: 1.5em; margin: 20px 0 0; font-size: 22px; font-weight: 700; color: var(--blue-dark); }
.kiosk :focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
@media (max-width: 600px) {
  .kiosk-actions { flex-direction: column-reverse; }
  .kiosk-button { width: 100%; }
  .kiosk-actions .kiosk-button.secondary:first-child { margin-right: 0; }
}

/* Accessibility floor: all text is at least 12px (see font-size codemod) and meets 4.5:1 contrast. */
.workspace-label span,
.top-location { color: var(--muted); }
.footer-star { color: var(--blue); }
.verify-box p { color: var(--muted); }
.brand-name small { letter-spacing: .4px; }