@font-face {
  font-family: Manrope;
  src: url("../manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  color-scheme: light;
}
body {
  margin: 0;
  font:
    16px/1.6 Manrope,
    Arial,
    sans-serif;
  color: var(--ink, #20282a);
  background: var(--bg, #fafaf7);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
button {
  color: inherit;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  line-height: 1.16;
  letter-spacing: -0.045em;
  font-weight: 600;
}
h1 {
  font-size: clamp(2.5rem, 5.7vw, 5.2rem);
  margin-bottom: 25px;
}
h2 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  margin-bottom: 22px;
}
h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}
p {
  color: var(--muted, #626b68);
  margin-bottom: 20px;
}
small {
  font-size: 13px;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 650;
  display: block;
  margin-bottom: 22px;
  color: var(--accent);
}
.shell {
  max-width: 1320px;
  width: calc(100% - 100px);
  margin: auto;
}
.site-head {
  height: 100px;
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
.wordmark {
  font-size: 23px;
  letter-spacing: -0.045em;
  font-weight: 750;
  line-height: 1.1;
}
.wordmark small {
  font-size: 11px;
  letter-spacing: 0.16em;
  display: block;
  font-weight: 500;
  margin-top: 5px;
}
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-size: 14px;
  align-items: center;
}
.site-nav a {
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
}
.nav-cta {
  padding: 11px 18px !important;
  border: 1px solid var(--line) !important;
}
.hero {
  padding-block: 65px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
}
.hero-copy > p {
  max-width: 470px;
  font-size: 17px;
}
.hero-image {
  height: 490px;
  position: relative;
}
.image-caption {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 23px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--button-text, #fff);
  font-size: 14px;
  font-weight: 650;
  border-radius: var(--radius, 0);
}
.btn:hover {
  filter: brightness(0.94);
}
.btn.secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}
.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.section {
  padding-block: 75px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: baseline;
  margin-bottom: 32px;
}
.section-head h2 {
  margin-bottom: 0;
}
.section-head p {
  max-width: 430px;
  margin: 0;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.service-card {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.service-card .number {
  font-size: 14px;
  color: var(--accent);
  display: block;
  margin-bottom: 28px;
}
.service-card p {
  margin-bottom: 0;
}
.band {
  background: var(--soft);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.band p:last-child {
  margin-bottom: 0;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 38px;
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: 14px;
}
.site-footer span {
  color: var(--muted);
}
.demo-disclaimer {
  font-size: 13px;
  text-align: center;
  margin: 0;
  padding: 12px 20px;
  color: var(--muted);
  background: var(--soft);
  border-top: 1px solid var(--line);
}
[data-view][hidden] {
  display: none !important;
}
.subhero {
  padding-block: 65px 30px;
  max-width: 820px;
}
.subhero h1 {
  font-size: clamp(2.4rem, 5vw, 4.7rem);
}
.subhero > p {
  font-size: 18px;
  max-width: 690px;
}
.big-number {
  font-size: 3rem;
  letter-spacing: -0.065em;
  color: var(--accent);
  display: block;
  margin-bottom: 7px;
}
.spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.spec-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.split-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding-block: 45px 70px;
}
.list-copy {
  padding: 25px 0;
  border-top: 1px solid var(--line);
}
.list-copy:last-child {
  border-bottom: 1px solid var(--line);
}
.list-copy p {
  margin: 0;
}
.contact-panel {
  background: var(--soft);
  padding: 35px;
}
.contact-panel h2 {
  font-size: 2rem;
}
.contact-panel label {
  display: block;
  font-size: 14px;
  margin-bottom: 17px;
}
.contact-panel input,
.contact-panel select {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 5px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  min-width: 0;
}
.contact-panel output {
  display: block;
  font-size: 14px;
  margin-top: 18px;
  color: var(--accent);
}
.skip {
  position: fixed;
  top: -100px;
  padding: 12px;
  background: white;
  z-index: 100;
}
.skip:focus {
  top: 0;
}
.status {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: #e7f1e9;
  color: #285b36;
  white-space: nowrap;
}
.status.pending {
  background: #fcf0d6;
  color: #88600f;
}
.status.neutral {
  background: #eef0f5;
  color: #576078;
}
.status.rose {
  background: #f5e8ef;
  color: #975c78;
}
.empty-note {
  padding: 20px;
  background: var(--soft);
  border-left: 3px solid var(--accent);
  font-size: 14px;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 14px;
  min-width: 550px;
}
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  color: var(--muted);
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  white-space: nowrap;
}
td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
td strong {
  font-weight: 650;
}
td small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
tr:last-child td {
  border-bottom: 0;
}
.progress {
  height: 6px;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: block;
  width: 100%;
  min-width: 70px;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--soft);
  color: var(--accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 650;
}
.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex: none;
}
.muted {
  color: var(--muted);
}
.tag {
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--soft);
  padding: 5px 9px;
  display: inline-block;
}
.app {
  --bg: #f6f7fa;
  --line: #e4e6ee;
  --muted: #6f7586;
  --ink: #252a3b;
  --soft: #f5f5fa;
  --accent: #775dbb;
  --radius: 7px;
}
.app-layout {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: var(--sidebar, #fff);
  color: var(--side-ink, var(--ink));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 34px 20px;
  gap: 30px;
  min-height: 100vh;
}
.sidebar .wordmark {
  font-size: 22px;
  padding: 0 8px;
}
.side-caption {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--side-muted, var(--muted));
  padding: 0 13px;
  margin: 0 0 12px;
}
.app-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.app-nav a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  font-size: 14px;
  border-radius: var(--radius);
  color: var(--side-muted, var(--muted));
}
.app-nav a[aria-current="page"] {
  background: var(--side-active, var(--soft));
  color: var(--side-active-ink, var(--accent));
  font-weight: 650;
}
.app-nav a:hover {
  background: var(--side-active, var(--soft));
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--side-line, var(--line));
  padding-top: 22px;
  font-size: 12px;
}
.sidebar-bottom strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.sidebar-bottom span {
  color: var(--side-muted, var(--muted));
}
.app-main {
  min-width: 0;
}
.app-top {
  height: 78px;
  background: var(--panel, #fff);
  border-bottom: 1px solid var(--line);
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}
.app-top > span {
  color: var(--muted);
}
.app-account {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-content {
  padding: 35px;
  max-width: 1500px;
  margin: auto;
}
.app-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 26px;
}
.app-heading h1 {
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin-bottom: 5px;
}
.app-heading p {
  font-size: 14px;
  margin: 0;
}
.app-heading .btn {
  min-height: 42px;
  padding: 9px 16px;
  white-space: nowrap;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 25px;
}
.metric {
  padding: 22px;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.metric > span {
  font-size: 13px;
  display: block;
  color: var(--muted);
}
.metric > strong {
  font-size: 1.95rem;
  letter-spacing: -0.055em;
  display: block;
  line-height: 1.3;
  margin: 10px 0 8px;
}
.metric small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}
.metric small.positive {
  color: #407951;
}
.panel {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  overflow: hidden;
  margin-bottom: 24px;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 21px 23px;
  border-bottom: 1px solid var(--line);
}
.panel-title h2 {
  font-size: 16px;
  letter-spacing: -0.02em;
  margin: 0;
}
.panel-title > a,
.panel-title > span {
  font-size: 12px;
  color: var(--muted);
}
.panel-body {
  padding: 23px;
}
.app-columns {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
}
.app-columns .panel {
  margin-bottom: 0;
}
.panel p {
  font-size: 14px;
  margin-bottom: 16px;
}
.activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity li {
  padding: 15px 0;
  display: flex;
  gap: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.activity li:first-child {
  padding-top: 0;
}
.activity li:last-child {
  border: 0;
  padding-bottom: 0;
}
.activity strong {
  display: block;
  font-weight: 600;
}
.activity small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.activity .activity-icon {
  background: var(--soft);
  border-radius: 7px;
  padding: 9px;
  height: 38px;
}
.bar-chart {
  height: 185px;
  display: flex;
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 10px 9px 0;
  margin-bottom: 10px;
}
.chart-column {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
  flex: 1;
  height: 100%;
  gap: 7px;
  min-width: 0;
}
.chart-column b {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.chart-column i {
  display: block;
  width: 70%;
  height: var(--bar);
  border-radius: 5px 5px 0 0;
  background: var(--accent);
  opacity: 0.84;
  min-height: 5px;
}
.chart-labels {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.line-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-legend {
  display: flex;
  gap: 22px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 13px;
  flex-wrap: wrap;
}
.chart-legend span:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  background: var(--accent);
  margin-right: 7px;
  border-radius: 2px;
}
.chart-legend span:nth-child(2):before {
  background: var(--line);
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  border-left: 2px solid var(--line);
  padding: 0 0 22px 20px;
  position: relative;
  font-size: 14px;
}
.timeline li:before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  left: -5px;
  top: 6px;
}
.timeline strong {
  display: block;
}
.timeline small {
  color: var(--muted);
}
.timeline li:last-child {
  padding-bottom: 0;
}
.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.document-card {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.file-icon {
  width: 38px;
  height: 46px;
  display: flex;
  align-items: end;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  background: var(--soft);
  color: var(--accent);
  margin-bottom: 18px;
}
.document-card h2 {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin: 0 0 7px;
}
.document-card p {
  font-size: 13px;
}
.app-notice {
  font-size: 12px;
  color: var(--muted);
  margin: 24px 0 0;
}
.message-row {
  padding: 20px 25px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: start;
}
.message-row:last-child {
  border: 0;
}
.message-row > div {
  flex: 1;
}
.message-row h2 {
  font-size: 16px;
  margin: 0 0 7px;
}
.message-row p {
  margin: 0;
  font-size: 14px;
}
.message-row time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  z-index: 20;
  background: var(--ink);
  color: var(--bg);
  padding: 14px 22px;
  border-radius: 6px;
  box-shadow: 0 6px 30px #0003;
  font-size: 14px;
}
.mobile-nav-button {
  display: none;
}
.calendar {
  display: grid;
  grid-template-columns: 65px repeat(5, minmax(0, 1fr));
  min-width: 600px;
  font-size: 12px;
}
.calendar > div {
  min-height: 76px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
}
.calendar .day {
  min-height: 55px;
  font-weight: 650;
  text-align: center;
}
.calendar .hour {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  background: var(--soft);
}
.slot {
  background: var(--soft);
  border-left: 3px solid var(--accent);
  padding: 8px;
  border-radius: 4px;
  display: block;
  line-height: 1.5;
}
.slot strong {
  display: block;
  font-size: 12px;
}
.slot.coral {
  background: #fbefea;
  border-color: #c97461;
}
.slot.blue {
  background: #eaf1f9;
  border-color: #6b8aaf;
}
.configurator {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 25px;
}
.configurator label {
  display: block;
  font-size: 14px;
  margin-bottom: 21px;
}
.configurator select,
.configurator input {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 7px;
}
.config-summary {
  padding: 25px;
  background: var(--soft);
  border-radius: var(--radius);
}
.config-summary h2 {
  font-size: 1.3rem;
}
.config-summary output {
  display: block;
  font-size: 2.5rem;
  letter-spacing: -0.05em;
  margin: 20px 0;
  color: var(--accent);
}
.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kanban-col {
  background: var(--soft);
  padding: 17px;
  border-radius: var(--radius);
}
.kanban-col > h2 {
  font-size: 14px;
  letter-spacing: 0;
  margin: 0 0 20px;
  display: flex;
  justify-content: space-between;
}
.task {
  padding: 19px;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  margin-bottom: 15px;
  border-radius: var(--radius);
}
.task:last-child {
  margin: 0;
}
.task h3 {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 10px 0;
}
.task p {
  font-size: 13px;
}
.task-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.task-bottom .avatar {
  width: 25px;
  height: 25px;
  font-size: 10px;
}
.report-totals {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.report-totals strong {
  display: block;
  font-size: 26px;
  letter-spacing: -0.04em;
}
.report-totals span {
  font-size: 12px;
  color: var(--muted);
}
.workspace-head {
  display: flex;
  align-items: center;
  gap: 35px;
  min-height: 85px;
  padding: 18px 42px;
  border-bottom: 1px solid var(--line);
  background: var(--panel, #fff);
}
.workspace-head .wordmark {
  flex: none;
}
.workspace-nav {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: auto;
  font-size: 14px;
}
.workspace-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.workspace-nav a[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
}
.workspace-nav a:hover {
  color: var(--accent);
}
.workspace-content {
  max-width: 1440px;
  padding: 24px 42px 55px;
  margin: auto;
  min-width: 0;
}
.workspace-context {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 32px;
}
.wordmark > span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.person-intro {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 23px;
}
.person-intro h3 {
  font-size: 18px;
  margin-bottom: 4px;
}
.person-intro p {
  margin: 0;
}
.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;
}
select option {
  background: var(--bg);
  color: var(--ink);
}
[data-view] {
  animation: view-in 0.3s ease-out;
}
@keyframes view-in {
  from {
    opacity: 0.65;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.reactive-surface {
  --mx: 0px;
  --my: 0px;
}
.app-notice {
  clear: both;
}
/* 01: an immersive digital studio, electric and cinematic. */
.vanta {
  --bg: #090c14;
  --ink: #f6f8ff;
  --accent: #c6f053;
  --button-text: #14180c;
  --muted: #b0b7c8;
  --soft: #151a27;
  --line: #353c50;
  font-family: "space-grotesk", Arial, sans-serif;
}
.vanta .shell {
  width: calc(100% - 80px);
  max-width: 1500px;
}
.vanta .site-head {
  height: 90px;
}
.vanta .wordmark {
  font-size: 24px;
  letter-spacing: -0.055em;
}
.vanta .logo-dot {
  font-size: 12px;
  color: var(--accent);
  vertical-align: top;
  margin: 0 5px;
}
.vanta .site-nav {
  font-size: 14px;
  gap: 28px;
}
.vanta-hero {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  padding: 30px 0 35px;
}
.vanta-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  object-position: 65% center;
  transform: translate(var(--mx), var(--my)) scale(1.08);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: art-breathe 13s ease-in-out infinite alternate;
}
.vanta-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #090c14ef, transparent 74%),
    linear-gradient(0deg, #090c14ef, transparent 40%);
}
.vanta-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.vanta-hero .eyebrow {
  margin-bottom: 0;
  color: #c4cada;
}
.motion-toggle {
  padding: 9px 12px;
  color: var(--ink);
  background: #151a2799;
  border: 1px solid var(--line);
  font-size: 12px;
  min-height: 38px;
  border-radius: 30px;
}
.motion-toggle:hover {
  border-color: var(--accent);
}
.vanta h1 {
  font-size: clamp(5rem, 10.8vw, 10.6rem);
  line-height: 0.91;
  letter-spacing: -0.065em;
  font-weight: 600;
  margin: 47px 0 32px;
}
.vanta h1 > span {
  color: var(--accent);
}
.vanta-hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.vanta-hero-bottom p {
  font-size: 16px;
  margin: 0;
}
.hero-index {
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 15px;
  white-space: nowrap;
}
.vanta .btn {
  border-radius: 40px;
  padding: 14px 25px;
  min-height: 50px;
}
.vanta .btn.secondary {
  border-color: var(--line);
  color: var(--ink);
}
.vanta .subhero h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin-top: 25px;
}
.vanta-strip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-block: 1px solid var(--line);
  padding: 22px 0;
  font-size: clamp(1.2rem, 2.6vw, 2.5rem);
  letter-spacing: -0.04em;
  font-weight: 600;
}
.vanta-strip i {
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
}
.vanta-projects {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 25px;
}
.project-block {
  background: #293fee;
  min-height: 350px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s,
    background 0.35s;
}
.project-block:nth-child(2) {
  background: #bde957;
  color: #162117;
  min-height: 300px;
  align-self: end;
}
.project-block > span {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}
.project-block h3,
.project-block h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 30px;
}
.project-block small {
  margin-top: auto;
  font-size: 13px;
}
.project-block:hover {
  transform: translateY(-6px);
}
.project-block p {
  color: inherit;
}
.project-block .spec-list {
  border-color: #fff4;
  font-size: 14px;
}
.project-block .spec-list li {
  border-color: #fff4;
}
.vanta-statement {
  padding-block: 80px 90px;
  text-align: center;
}
.vanta-statement h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.03;
}
.vanta-statement em {
  color: var(--accent);
  font-style: normal;
}
.lab-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.lab-controls > span {
  color: var(--muted);
  font-size: 13px;
}
.network-canvas {
  display: block;
  width: 100%;
  height: 400px;
  background: #101622;
  border: 1px solid var(--line);
  border-radius: 7px;
  touch-action: none;
}
.lab-notes {
  padding-block: 40px;
}
.lab-notes article > span {
  font-size: 12px;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.lab-notes h3 {
  font-size: 22px;
}
.lab-notes p {
  font-size: 15px;
}
.vanta .site-footer {
  margin-top: 15px;
}
.motion-off .vanta-art {
  animation: none;
  transform: none !important;
}
.motion-off [data-view] {
  animation: none;
}
.reveal-item {
  transition:
    opacity 0.65s,
    transform 0.65s;
}
.motion-enhanced .reveal-item:not(.revealed) {
  opacity: 0;
  transform: translateY(22px);
}
@keyframes art-breathe {
  from {
    filter: brightness(0.92);
  }
  to {
    filter: brightness(1.12);
  }
}
/* 02: an expressive single-page product world. */
.pulse {
  --bg: #f3eadd;
  --ink: #2a2824;
  --accent: #a83928;
  --muted: #70665c;
  --soft: #e9decf;
  --line: #cfc0ae;
  font-family: "outfit", Arial, sans-serif;
}
.pulse-head {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 45px;
  background: #f3eadd;
  border-bottom: 1px solid var(--line);
}
.pulse .wordmark {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.pulse .wordmark > span {
  display: block;
  letter-spacing: 0.18em;
  font-size: 11px;
  margin-top: 3px;
}
.pulse .site-nav {
  gap: 35px;
}
.pulse-edition {
  font-size: 12px;
  letter-spacing: 0.09em;
  border: 1px solid var(--line);
  padding: 8px 12px;
  margin-left: 25px;
}
.pulse-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 680px;
  background: #b9462f;
  position: relative;
  color: #fff4e3;
  isolation: isolate;
  overflow: hidden;
}
.pulse-hero > div {
  padding: 55px 0 55px 65px;
  align-self: center;
  position: relative;
  z-index: 1;
}
.pulse-hero img {
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  transform: translate(var(--mx), var(--my)) scale(1.04);
  transition: transform 0.8s ease;
}
.pulse-hero h1 {
  font-size: clamp(3.4rem, 6.9vw, 7.1rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 25px 0;
}
.pulse-hero h1 em {
  font-style: normal;
  color: #ffe0aa;
}
.pulse .pulse-hero .eyebrow,
.pulse-hero p {
  color: #fff4e3;
}
.pulse-hero .btn {
  background: #fff4e3;
  color: #9e3124;
  border-color: #fff4e3;
  border-radius: 30px;
}
.pulse-caption {
  position: absolute;
  bottom: 20px;
  right: 25px;
  font-size: 12px;
  color: #fff4e3;
  background: #6c231d99;
  padding: 7px 12px;
  border-radius: 20px;
}
.pulse-sound {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  padding: 85px 65px;
  position: relative;
}
.pulse-sound > .eyebrow {
  grid-column: 1/-1;
  margin: 0;
}
.pulse-sound h2 {
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  line-height: 0.98;
  margin: 0;
}
.pulse-sound h2 > span {
  color: var(--accent);
}
.pulse-sound > div {
  align-self: center;
}
.pulse-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  margin-top: 40px;
}
.pulse-features .icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  stroke-width: 1.8;
}
.pulse-features h3 {
  font-size: 18px;
  margin-top: 16px;
}
.pulse-features p {
  font-size: 14px;
}
.pulse-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  padding: 55px 65px;
  background: #e7dbca;
}
.pulse-details h2 {
  font-size: 2.5rem;
}
.pulse-details dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0;
  align-self: center;
}
.pulse-details dt {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.pulse-details dd {
  margin: 0;
  font-size: 18px;
}
.pulse-buy {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  padding: 80px 65px;
}
.pulse-buy h2 {
  font-size: 3.2rem;
}
.pulse-order {
  padding: 30px;
  background: #fff8ed;
  border-radius: 16px;
}
.package-options {
  display: flex;
  gap: 9px;
}
.package-options button {
  flex: 1;
  min-width: 0;
  padding: 16px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
}
.package-options button span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.package-options button[aria-pressed="true"] {
  background: #f2dac6;
  border-color: var(--accent);
}
.pulse-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0;
  font-size: 13px;
  color: var(--muted);
}
.pulse-price output {
  font-size: 35px;
  color: var(--accent);
  line-height: 1.1;
}
.pulse-order .btn {
  width: 100%;
  border-radius: 30px;
}
.pulse-footer {
  padding: 25px 45px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: #2a2824;
  color: #f1e5d6;
  font-size: 12px;
}
.pulse section[id] {
  scroll-margin-top: 15px;
}
/* 03: a confident customer portal, structured in blue. */
.cliento {
  font-family: "source-sans-3", Arial, sans-serif;
  --bg: #f2f6fc;
  --soft: #eaf2fc;
  --accent: #246abc;
  --line: #d4e2f2;
  --sidebar: #133b68;
  --side-ink: #fff;
  --side-muted: #c3d6ec;
  --side-active: #235385;
  --side-active-ink: #fff;
  --side-line: #456282;
  --radius: 10px;
}
.cliento .sidebar {
  padding-top: 36px;
}
.cliento .sidebar .wordmark {
  font-size: 26px;
  letter-spacing: 0.04em;
}
.cliento .wordmark small {
  font-size: 9px;
  letter-spacing: 0.09em;
}
.cliento .icon {
  stroke-width: 1.5;
}
.cliento .app-heading h1 {
  font-size: 2.25rem;
  letter-spacing: -0.025em;
}
.cliento .metric-grid {
  grid-template-columns: repeat(3, 1fr);
}
.client-project {
  background: linear-gradient(105deg, #245fa2, #347fc2);
  color: white;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  padding: 32px;
  margin-bottom: 25px;
}
.client-project .eyebrow {
  color: #cee4f9;
  font-size: 12px;
  margin-bottom: 15px;
}
.client-project h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}
.client-project p {
  color: #d8e8f7;
  margin: 0;
  font-size: 15px;
}
.client-project > div:last-child {
  align-self: center;
  font-size: 14px;
}
.client-project > div:last-child > span {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.client-project .progress {
  height: 8px;
  background: #729ec6;
}
.client-project .progress > span {
  background: #d4e9fe;
}
.client-project small {
  display: block;
  margin-top: 14px;
  color: #d4e7f7;
}
.cliento .panel-title h2 {
  font-size: 18px;
}
.cliento .btn {
  font-size: 15px;
}
.cliento .timeline strong {
  font-size: 16px;
}
.cliento .avatar {
  background: #dceafe;
  border-radius: 12px;
}
.cliento .app-top .avatar {
  border-radius: 50%;
}
/* 04: an approachable employee intranet, editorial rather than dashboard-like. */
.teamspace {
  font-family: "dm-sans", Arial, sans-serif;
  --bg: #fffdf8;
  --ink: #33261e;
  --accent: #b34a25;
  --muted: #776659;
  --soft: #f7eadb;
  --line: #e6d8c7;
  --radius: 14px;
}
.teamspace .workspace-head {
  background: #fffdf8;
}
.teamspace .workspace-head .wordmark {
  font-size: 24px;
  letter-spacing: -0.06em;
}
.teamspace .wordmark > span {
  font-size: 28px;
  color: var(--accent);
  margin-left: 7px;
}
.teamspace .workspace-nav .icon {
  stroke-width: 2.1;
  width: 17px;
  height: 17px;
}
.teamspace .workspace-nav {
  gap: 24px;
}
.teamspace .avatar {
  background: #f0ceaf;
  color: #853f23;
}
.team-welcome {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 65px;
  padding: 25px 0 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 35px;
  align-items: center;
}
.team-welcome h1 {
  font-family: "lora", Georgia, serif;
  font-weight: 400;
  font-size: 4.7rem;
  line-height: 1.03;
  letter-spacing: -0.05em;
  margin: 23px 0;
}
.team-welcome .eyebrow {
  margin: 0;
}
.team-welcome p {
  margin: 0;
  max-width: 480px;
}
.team-highlight {
  background: #c6552e;
  color: #fff4e4;
  padding: 35px;
  border-radius: 20px 20px 20px 4px;
  transform: rotate(-2deg);
}
.team-highlight > span {
  font-size: 13px;
  display: block;
  margin-bottom: 20px;
}
.team-highlight strong {
  font-size: 2.2rem;
  line-height: 1.18;
  display: block;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.team-highlight p {
  font-size: 14px;
  color: #ffe3cd;
  margin-top: 20px;
}
.team-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 45px;
}
.team-grid .section-head h2 {
  font-size: 24px;
}
.team-grid .section-head > span {
  font-size: 12px;
  color: var(--muted);
}
.news-card {
  background: #f8f0e5;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  margin-bottom: 23px;
}
.news-card:nth-of-type(2) {
  background: #f3e8de;
}
.news-card h3 {
  font-family: "lora", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  margin: 22px 0 15px;
}
.news-card p {
  font-size: 16px;
}
.news-card .tag {
  background: #fff9ed;
  color: #874721;
  border-radius: 30px;
  font-size: 11px;
}
.teamspace .btn {
  border-radius: 28px;
  font-size: 14px;
}
.quick-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 25px;
  background: #fffaf1;
}
.quick-card h2 {
  font-size: 22px;
  margin-bottom: 20px;
}
.quick-card > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.quick-card .icon {
  color: var(--accent);
  width: 22px;
  height: 22px;
}
.team-tip {
  padding: 30px;
  margin-top: 25px;
  border-left: 3px solid var(--accent);
}
.team-tip .eyebrow {
  margin-bottom: 10px;
}
.team-tip > strong {
  font-family: "lora", Georgia, serif;
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
}
.team-tip p {
  font-size: 14px;
  margin-top: 10px;
}
.team-tip > a {
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.knowledge-grid,
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
.knowledge-card,
.person-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  background: #fff9ef;
}
.knowledge-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ecd0b4;
  color: var(--accent);
  margin-bottom: 25px;
}
.knowledge-card h2 {
  font-family: "lora", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
}
.knowledge-card small {
  color: var(--accent);
}
.person-card .avatar {
  width: 62px;
  height: 62px;
  font-size: 18px;
  margin-bottom: 22px;
}
.person-card h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.person-card > strong {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}
.person-card p {
  margin-top: 14px;
}
.teamspace .app-heading h1 {
  font-family: "lora", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 400;
}
/* 05: an industrial workflow rail and geometric board. */
.werkflow {
  font-family: "barlow", Arial, sans-serif;
  --bg: #edece6;
  --ink: #2d332d;
  --accent: #8b6b1f;
  --muted: #6d7266;
  --soft: #e5e6dd;
  --line: #c9ccbf;
  --sidebar: #26312c;
  --side-ink: #f2f3e8;
  --side-muted: #c4cbbc;
  --side-active: #485342;
  --side-active-ink: #f3d278;
  --side-line: #5b6859;
  --radius: 0;
}
.werkflow .app-layout {
  grid-template-columns: 112px minmax(0, 1fr);
}
.werkflow .sidebar {
  padding: 26px 9px;
  gap: 35px;
}
.werkflow .sidebar .wordmark {
  font-size: 32px;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.06em;
}
.werkflow .side-caption,
.werkflow .sidebar-bottom {
  display: none;
}
.werkflow .app-nav {
  gap: 12px;
}
.werkflow .app-nav a {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 13px 6px;
  font-size: 14px;
}
.werkflow .app-nav .icon {
  width: 23px;
  height: 23px;
  stroke-width: 2;
  stroke-linecap: square;
}
.werkflow .app-top {
  background: #f5f4ee;
  height: 65px;
  font-size: 13px;
}
.werkflow .app-content {
  padding: 30px;
}
.werkflow .app-heading h1 {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.werkflow .metric {
  border: 0;
  border-top: 3px solid #87947a;
  border-radius: 0;
  background: #f8f8f1;
  padding: 17px 23px;
}
.werkflow .metric > strong {
  font-size: 2.5rem;
  font-weight: 400;
}
.werkflow .panel {
  background: #fafaf5;
}
.werkflow .panel-title {
  padding-block: 18px;
}
.werkflow .panel-title h2 {
  font-size: 18px;
}
.werkflow .btn {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.015em;
}
.werkflow .kanban-col {
  background: #d9ded0;
  border-top: 3px solid #a79b58;
  padding: 20px;
}
.werkflow .kanban-col:nth-child(2) {
  background: #d6ddd5;
  border-color: #708b79;
}
.werkflow .kanban-col:nth-child(3) {
  background: #e0e2d8;
  border-color: #85916f;
}
.werkflow .task {
  background: #fbfcf4;
  border: 0;
  border-bottom: 2px solid #c4cbb8;
  box-shadow: 0 4px 9px #26312c0b;
}
.werkflow .task h3 {
  font-size: 19px;
  font-weight: 600;
}
.werkflow .task p {
  font-size: 15px;
}
.werkflow .tag {
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.werkflow .task-bottom .avatar {
  border-radius: 0;
}
.werkflow table {
  font-size: 15px;
}
.werkflow .bar-chart i {
  border-radius: 0;
}
.werkflow .app-top .avatar {
  border-radius: 4px;
}
/* 06: a precise transaction ledger with high contrast and magenta detail. */
.evidenz {
  font-family: "ibm-plex-sans", Arial, sans-serif;
  --bg: #f5f5f7;
  --ink: #26252e;
  --accent: #9b3076;
  --muted: #777580;
  --soft: #eeeef2;
  --line: #d9d8df;
  --radius: 2px;
}
.evidenz .workspace-head {
  min-height: 78px;
  background: #24222b;
  color: #f7f4fa;
  border-color: #46434f;
}
.evidenz .workspace-head .wordmark {
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 0.025em;
}
.evidenz .wordmark > span {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #ccbdd0;
}
.evidenz .workspace-nav {
  font-size: 14px;
  gap: 27px;
}
.evidenz .workspace-nav .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.evidenz .workspace-nav a[aria-current="page"] {
  color: #eda5d7;
  border-color: #eda5d7;
}
.evidenz .workspace-head .avatar {
  background: #60445f;
  color: #ffdef3;
  border-radius: 3px;
}
.evidenz .workspace-content {
  max-width: none;
  padding-inline: 36px;
}
.evidenz .app-heading h1 {
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.evidenz .panel {
  border: 1px solid var(--line);
  border-top: 2px solid #b26c9d;
  border-radius: 0;
}
.evidenz th {
  background: #eeedf1;
  font-size: 11px;
}
.evidenz td {
  padding: 20px 19px;
}
.evidenz table {
  font-size: 15px;
}
.evidenz .row-link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
  padding: 25px 0;
}
.ledger-summary > div {
  padding: 0 24px;
  border-left: 1px solid var(--line);
}
.ledger-summary > div:first-child {
  padding-left: 0;
  border: 0;
}
.ledger-summary span {
  font-size: 12px;
  color: var(--muted);
  display: block;
}
.ledger-summary strong {
  display: block;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-top: 6px;
}
.ledger-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 22px;
}
.ledger-toolbar > span {
  color: var(--muted);
}
.ledger-toolbar strong {
  color: var(--ink);
  margin-left: 12px;
}
.ledger-toolbar label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  align-items: center;
}
.ledger-toolbar input {
  min-height: 39px;
  width: 250px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  color: var(--ink);
}
.ledger-footer {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.evidenz .btn {
  border-radius: 2px;
}
.order-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  padding: 25px;
  border: 1px solid var(--line);
  margin-bottom: 25px;
  gap: 20px;
}
.order-meta span:not(.status) {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
}
.order-meta strong {
  font-size: 15px;
  font-weight: 600;
}
.order-total {
  display: flex;
  justify-content: end;
  gap: 35px;
  align-items: center;
  margin: 25px 0;
  font-size: 14px;
}
.order-total strong {
  font-size: 29px;
  font-weight: 400;
  color: var(--accent);
}
/* 07: a friendly, airy booking journey. */
.tempo {
  font-family: "sora", Arial, sans-serif;
  --bg: #f8fdfc;
  --ink: #153d40;
  --accent: #166f72;
  --muted: #637f81;
  --soft: #e8f5f1;
  --line: #cee2de;
  --radius: 18px;
}
.tempo .workspace-head {
  background: #f8fdfc;
  padding-block: 23px;
}
.tempo .wordmark {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.065em;
}
.tempo .wordmark > span {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.tempo .workspace-nav .icon {
  stroke-width: 1.3;
}
.tempo .workspace-content {
  padding-top: 26px;
}
.booking-intro {
  max-width: 700px;
  padding: 10px 0 35px;
}
.booking-intro h1 {
  font-size: 3.7rem;
  line-height: 1.05;
  font-weight: 400;
  margin: 18px 0;
}
.booking-intro p {
  margin: 0;
}
.booking-intro .eyebrow {
  font-size: 12px;
}
.booking-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 45px;
  align-items: start;
}
.booking-picker > h2 {
  font-size: 16px;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  font-weight: 600;
}
.booking-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 33px;
}
.booking-services > button {
  display: flex;
  align-items: start;
  flex-direction: column;
  text-align: left;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 25px;
  color: var(--ink);
}
.booking-services > button[aria-pressed="true"] {
  background: #e2f1ed;
  border-color: var(--accent);
}
.booking-services .icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.4;
}
.booking-services strong {
  font-size: 17px;
  font-weight: 600;
}
.booking-services small {
  font-size: 12px;
  color: var(--muted);
}
.date-choice {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.date-choice button {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  background: #fff;
  max-width: 100px;
  padding: 14px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
}
.date-choice button strong {
  color: var(--ink);
  font-size: 27px;
  font-weight: 400;
  margin-block: 7px;
}
.date-choice button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #cde4df;
}
.date-choice button[aria-pressed="true"] strong {
  color: #fff;
}
.time-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}
.time-choice button {
  padding: 12px 17px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
}
.time-choice button[aria-pressed="true"] {
  border-color: var(--accent);
  background: #def0eb;
}
.booking-summary {
  padding: 30px;
  background: #e8f4ef;
  border-radius: 22px;
  position: sticky;
  top: 24px;
}
.booking-summary h2 {
  font-size: 25px;
  margin-top: 15px;
}
.booking-summary > .eyebrow {
  font-size: 11px;
}
.booking-summary > p {
  font-size: 15px;
}
.booking-summary .spec-list {
  font-size: 13px;
  margin-bottom: 27px;
}
.booking-summary .spec-list li {
  gap: 10px;
}
.booking-summary .btn {
  width: 100%;
  font-size: 13px;
  min-height: 50px;
}
.booking-summary output {
  display: block;
  font-size: 14px;
  color: var(--accent);
  margin-top: 18px;
}
.booking-summary > small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px;
}
.tempo .panel {
  border-radius: 18px;
}
.tempo .calendar > div {
  min-height: 94px;
}
.tempo .calendar .day {
  min-height: 56px;
}
.tempo .slot {
  border-radius: 7px;
  background: #d8ede6;
  border-left-width: 2px;
}
.booking-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}
.booking-cards > article {
  border: 1px solid var(--line);
  padding: 27px;
  border-radius: 16px;
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
}
.booking-cards h2 {
  font-size: 21px;
  margin-bottom: 7px;
}
.booking-cards p {
  font-size: 14px;
  margin: 0;
}
.booking-cards .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.2;
}
.booking-cards .status {
  margin-left: auto;
}
.tempo .app-heading h1 {
  font-size: 2.25rem;
  font-weight: 400;
}
.tempo .contact-panel {
  border-radius: 18px;
}
/* 08: a modular, unapologetically graphic offer configurator. */
.stagekit {
  font-family: "ibm-plex-mono", monospace;
  --bg: #e9e86c;
  --ink: #22251c;
  --accent: #22251c;
  --button-text: #f1f0aa;
  --muted: #616443;
  --soft: #dcdc8f;
  --line: #b5b85c;
  --radius: 0;
}
.stagekit .workspace-head {
  background: #e9e86c;
  border-bottom: 1px solid #9d9f53;
}
.stagekit .wordmark {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.08em;
}
.stagekit .wordmark > span {
  font-size: 11px;
  margin-left: 4px;
  vertical-align: top;
}
.stagekit .workspace-nav {
  font-size: 12px;
  gap: 24px;
}
.stagekit .workspace-nav .icon {
  display: none;
}
.stagekit .workspace-head .avatar {
  background: #252a21;
  color: #e9e86c;
  border-radius: 0;
}
.stagekit .workspace-context {
  font-size: 11px;
}
.stage-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px 60px;
  margin: 10px 0 40px;
}
.stage-heading .eyebrow {
  grid-column: 1/-1;
  margin: 0;
  font-size: 11px;
}
.stage-heading h1 {
  font-size: clamp(2.5rem, 4.7vw, 4.5rem);
  font-weight: 600;
  line-height: 1.07;
  margin: 0;
  letter-spacing: -0.07em;
}
.stage-heading p {
  max-width: 400px;
  align-self: end;
  font-size: 15px;
  margin: 0;
}
.stage-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 45px;
  align-items: start;
}
.stage-options fieldset {
  margin: 0 0 28px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.stage-options legend {
  padding-right: 20px;
  font-size: 15px;
  font-weight: 600;
}
.stage-options legend > span {
  font-size: 12px;
  margin-right: 18px;
}
.stage-options label {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid #b0b55e;
  background: #f0ee9a;
  margin-bottom: 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.stage-options label:has(input:checked) {
  background: #fffcc0;
  border-color: #22251c;
  box-shadow: inset 3px 0 #22251c;
}
.stage-options input {
  width: 18px;
  height: 18px;
  accent-color: #282c21;
  flex: none;
}
.stage-options strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.stage-options small {
  font-size: 12px;
  display: block;
  color: var(--muted);
  margin-top: 6px;
}
.stage-summary {
  position: sticky;
  top: 20px;
  padding: 36px;
  background: #262b24;
  color: #f7f5b0;
}
.stage-summary .eyebrow {
  color: #cbc98c;
  font-size: 11px;
}
.stage-summary h2 {
  font-size: 2.1rem;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.stage-summary > ul,
.stage-offer ul {
  padding: 0;
  list-style: none;
  margin: 25px 0 0;
  font-size: 13px;
}
.stage-summary li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #626747;
}
.stage-summary > div {
  margin-top: 25px;
}
.stage-summary > div > span {
  font-size: 11px;
  color: #c4c99c;
  display: block;
}
.stage-summary output {
  font-size: 3.1rem;
  display: block;
  letter-spacing: -0.06em;
  line-height: 1.2;
  margin: 10px 0 25px;
}
.stage-summary .btn {
  background: #e9e86c;
  border-color: #e9e86c;
  color: #252a21;
  width: 100%;
  font-size: 13px;
}
.stage-summary > small {
  font-size: 11px;
  display: block;
  margin-top: 20px;
  color: #c4c99c;
}
.stage-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.stage-packages article {
  padding: 30px;
  border: 1px solid var(--line);
  background: #f0ee98;
}
.stage-packages article > span {
  font-size: 11px;
}
.stage-packages .icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 25px 0;
  stroke-width: 1.4;
  stroke-linecap: square;
}
.stage-packages h2 {
  font-size: 2rem;
  font-weight: 400;
}
.stage-packages p {
  font-size: 14px;
}
.stagekit .app-heading h1 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.12;
  max-width: 770px;
}
.stage-offer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  background: #fffcc1;
  padding: 40px;
  margin-bottom: 30px;
  border: 1px solid var(--line);
}
.stage-offer li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.stage-offer output {
  font-size: 4rem;
  display: block;
  letter-spacing: -0.07em;
  margin: 16px 0;
}
.stage-offer > div > span {
  font-size: 12px;
  color: var(--muted);
}
.stage-offer p {
  font-size: 14px;
}
/* 09: a dark, technical analytical workbench. */
.spectra {
  font-family: "inter", Arial, sans-serif;
  --bg: #101923;
  --ink: #e5f2f7;
  --accent: #61d4e1;
  --button-text: #13262d;
  --muted: #93acbb;
  --soft: #1a2935;
  --line: #345061;
  --panel: #15232e;
  --radius: 3px;
}
.spectra .workspace-head {
  background: #0d151d;
  border-color: #2c4351;
  min-height: 78px;
}
.spectra .wordmark {
  font-family: "ibm-plex-mono", monospace;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.spectra .wordmark > span {
  font-size: 10px;
  color: #91b2c2;
}
.spectra .workspace-nav {
  font-size: 13px;
  gap: 30px;
}
.spectra .workspace-nav .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.3;
}
.spectra .workspace-content {
  max-width: none;
  padding-inline: 35px;
}
.spectra .workspace-context {
  font-family: "ibm-plex-mono", monospace;
  font-size: 11px;
}
.spectra .avatar {
  border-radius: 3px;
  background: #244651;
  color: #9ae5ed;
}
.spectra .app-heading h1 {
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.spectra-workbench {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
}
.spectra-settings {
  border-right: 1px solid var(--line);
  padding: 27px;
}
.spectra-settings .eyebrow {
  font-family: "ibm-plex-mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 23px;
}
.spectra-settings label {
  font-size: 13px;
  display: block;
  margin-bottom: 25px;
}
.spectra-settings select {
  display: block;
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--line);
  background: #1a2f3b;
  color: var(--ink);
  padding: 10px;
  font-size: 14px;
}
.spectra-settings input {
  display: block;
  width: 100%;
  margin-top: 17px;
  accent-color: var(--accent);
}
.spectra-settings label > output {
  float: right;
  color: var(--accent);
}
.sensor-stat {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.sensor-stat > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}
.sensor-stat > strong {
  font-size: 26px;
  letter-spacing: -0.04em;
  font-weight: 400;
  display: block;
}
.sensor-stat p {
  font-size: 14px;
  margin-top: 16px;
}
.spectra-settings > small {
  font-size: 11px;
  color: var(--muted);
}
.spectra-plot {
  padding: 25px;
  min-width: 0;
  background: #15232e;
  border: 1px solid var(--line);
  margin-bottom: 30px;
}
.spectra-workbench .spectra-plot {
  margin: 0;
  border: 0;
}
.plot-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: "ibm-plex-mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 18px;
}
.spectra-plot svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
}
.plot-legend {
  display: flex;
  gap: 24px;
  font-size: 11px;
  margin: 15px 0 25px;
  color: var(--muted);
}
.plot-legend span:before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 2px;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.plot-legend span:nth-child(2):before {
  background: #a18cf0;
}
.spectra-console {
  background: #0d1821;
  padding: 18px;
  border: 1px solid #29414f;
  font-family: "ibm-plex-mono", monospace;
}
.spectra-console > span {
  font-size: 10px;
  color: var(--muted);
}
.spectra-console p {
  font-size: 12px;
  color: #c9e5ef;
  margin: 8px 0 0;
}
.spectra-note {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1.1fr;
  gap: 35px;
  padding: 45px 0;
  border-bottom: 1px solid var(--line);
}
.spectra-note > span {
  font-family: "ibm-plex-mono", monospace;
  font-size: 12px;
  color: var(--accent);
}
.spectra-note h2 {
  font-size: 26px;
  font-weight: 400;
  margin: 0;
}
.spectra-note p {
  font-size: 14px;
  margin: 0;
}
.data-preview {
  font-family: "ibm-plex-mono", monospace;
  font-size: 12px;
  line-height: 2;
  white-space: pre-wrap;
  margin: 0;
  color: #bce2e9;
}
.spectra .panel-title h2 {
  font-size: 16px;
  font-weight: 400;
}
.spectra table {
  font-size: 14px;
}
/* 10: a quiet, literary specialist editor. */
.lexa {
  font-family: "source-sans-3", Arial, sans-serif;
  --bg: #fafcff;
  --ink: #233458;
  --accent: #3e5d9e;
  --muted: #748199;
  --soft: #eaf0fc;
  --line: #d6dfef;
  --radius: 0;
}
.lexa .workspace-head {
  background: #edf2ff;
  border-bottom: 1px solid var(--line);
  padding-block: 25px;
}
.lexa .wordmark {
  font-family: "lora", Georgia, serif;
  font-size: 33px;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.lexa .wordmark > span {
  font-family: "source-sans-3", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-left: 8px;
}
.lexa .workspace-nav {
  gap: 32px;
  font-size: 16px;
}
.lexa .workspace-nav a {
  font-weight: 400;
  border-bottom-width: 1px;
}
.lexa .workspace-head .avatar {
  background: #cedbf7;
  color: #3a5284;
  border-radius: 50%;
  font-size: 13px;
}
.lexa .workspace-context {
  font-size: 13px;
}
.lexa-intro {
  text-align: center;
  margin: 10px 0 45px;
}
.lexa-intro h1 {
  font-family: "lora", Georgia, serif;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.05em;
  margin: 18px 0;
}
.lexa-intro .eyebrow {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}
.lexa-intro p {
  font-size: 16px;
  margin: 0;
}
.lexa-editor {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 35px;
  align-items: start;
}
.lexa-editor > section {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 15px 45px #253c6c08;
}
.editor-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.lexa textarea {
  display: block;
  width: 100%;
  min-height: 425px;
  padding: 33px;
  border: 0;
  resize: vertical;
  font-family: "lora", Georgia, serif;
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink);
  background: #fff;
  outline-offset: -4px;
  overflow-wrap: anywhere;
}
.editor-footer {
  padding: 17px 25px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  font-size: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.writing-analysis {
  background: #edf3ff;
  padding: 30px;
  border-top: 2px solid var(--accent);
}
.writing-analysis .eyebrow {
  font-size: 11px;
  letter-spacing: 0.07em;
  margin-bottom: 16px;
  color: var(--muted);
}
.writing-analysis h2 {
  font-family: "lora", Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.writing-metrics {
  display: flex;
  gap: 55px;
  border-block: 1px solid var(--line);
  padding: 20px 0;
  margin: 20px 0;
}
.writing-metrics strong {
  display: block;
  font-family: "lora", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}
.writing-metrics span {
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-top: 7px;
}
.writing-analysis > p {
  font-size: 14px;
}
.writing-analysis h3 {
  font-size: 16px;
  font-weight: 600;
}
.writing-analysis ul {
  padding-left: 17px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 25px;
}
.writing-analysis > small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 22px;
}
.lexa .btn {
  font-size: 15px;
  padding: 10px 20px;
  min-height: 44px;
  background: transparent;
  color: var(--accent);
  border-width: 1px;
}
.lexa .btn:hover {
  background: #dbe5f8;
}
.lexa .app-heading h1 {
  font-family: "lora", Georgia, serif;
  font-size: 2.7rem;
  font-weight: 400;
}
.lexa-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}
.lexa-checks article {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.lexa-checks article > span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.07em;
  display: block;
  margin-bottom: 28px;
}
.lexa-checks h2 {
  font-family: "lora", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
}
.lexa-checks p {
  font-size: 16px;
}
.lexa-checks strong {
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
}
.lexa .text-link {
  font-size: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.glossary-list {
  border-top: 1px solid var(--line);
  margin-bottom: 35px;
}
.glossary-list article {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.glossary-list article > span {
  font-family: "lora", Georgia, serif;
  font-size: 27px;
  color: var(--accent);
}
.glossary-list h2 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 12px;
}
.glossary-list p {
  margin: 0;
  font-size: 16px;
}
@media (max-width: 1050px) {
  .shell {
    width: calc(100% - 64px);
  }
  .site-nav {
    gap: 20px;
  }
  .workspace-head {
    padding-inline: 26px;
    gap: 22px;
  }
  .workspace-nav {
    gap: 18px;
  }
  .workspace-content {
    padding-inline: 26px;
  }
  .workspace-context {
    margin-bottom: 26px;
  }
  .app-content {
    padding: 27px;
  }
  .app-top {
    padding-inline: 27px;
  }
  .metric {
    padding: 19px;
  }
  .metric > strong {
    font-size: 1.9rem;
  }
  .app-columns {
    gap: 20px;
  }
  .panel-title,
  .panel-body {
    padding: 20px;
  }
  .vanta .shell {
    width: calc(100% - 56px);
  }
  .vanta-hero {
    min-height: 660px;
  }
  .vanta h1 {
    font-size: 7.8rem;
    margin-top: 55px;
  }
  .vanta-hero-bottom {
    gap: 20px;
  }
  .vanta-hero-bottom p {
    font-size: 15px;
  }
  .hero-index {
    display: none;
  }
  .vanta .site-nav {
    gap: 21px;
  }
  .pulse-hero > div {
    padding-left: 40px;
  }
  .pulse-hero h1 {
    font-size: 5rem;
  }
  .pulse-hero {
    min-height: 600px;
  }
  .pulse-sound,
  .pulse-buy {
    padding: 60px 40px;
    gap: 40px;
  }
  .pulse-details {
    padding: 45px 40px;
    gap: 45px;
  }
  .pulse-buy h2 {
    font-size: 2.6rem;
  }
  .pulse-order {
    padding: 25px;
  }
  .pulse-features {
    gap: 16px;
  }
  .team-welcome {
    gap: 35px;
  }
  .team-welcome h1 {
    font-size: 4rem;
  }
  .team-grid {
    gap: 28px;
  }
  .team-highlight {
    padding: 28px;
  }
  .team-highlight strong {
    font-size: 2rem;
  }
  .workspace-head .wordmark > span {
    display: none;
  }
  .evidenz .workspace-nav {
    gap: 20px;
  }
  .evidenz .workspace-content {
    padding-inline: 26px;
  }
  .booking-layout {
    gap: 28px;
    grid-template-columns: 1.25fr 1fr;
  }
  .booking-summary {
    padding: 25px;
  }
  .booking-services > button {
    padding: 20px;
  }
  .booking-services strong {
    font-size: 15px;
  }
  .stage-layout {
    gap: 30px;
  }
  .stage-summary {
    padding: 28px;
  }
  .stage-summary h2 {
    font-size: 1.8rem;
  }
  .stage-heading {
    gap: 20px 35px;
  }
  .stage-packages article {
    padding: 23px;
  }
  .stagekit .workspace-nav {
    gap: 18px;
  }
  .spectra .workspace-content {
    padding-inline: 25px;
  }
  .spectra-workbench {
    grid-template-columns: 210px 1fr;
  }
  .spectra-settings {
    padding: 21px;
  }
  .spectra-plot {
    padding: 21px;
  }
  .spectra-note {
    grid-template-columns: 0.4fr 1fr 1.1fr;
    gap: 23px;
  }
  .lexa-editor {
    gap: 25px;
    grid-template-columns: 1.35fr 1fr;
  }
  .writing-analysis {
    padding: 25px;
  }
  .lexa textarea {
    padding: 25px;
  }
  .lexa-checks {
    gap: 25px;
  }
}
@media (max-width: 760px) {
  .workspace-head {
    flex-wrap: wrap;
    gap: 20px;
    padding: 19px 22px;
  }
  .workspace-head > .avatar {
    margin-left: auto;
  }
  .workspace-nav {
    order: 3;
    width: 100%;
    margin: 0;
    justify-content: start;
    overflow: auto;
    gap: 24px;
    padding-bottom: 3px;
  }
  .workspace-nav a {
    font-size: 14px;
    min-height: 38px;
  }
  .workspace-content,
  .evidenz .workspace-content,
  .spectra .workspace-content {
    padding: 23px 22px 40px;
  }
  .workspace-context {
    font-size: 11px;
    gap: 15px;
    line-height: 1.7;
  }
  .workspace-context > span {
    display: none;
  }
  .app-layout {
    display: block;
  }
  .sidebar {
    min-height: 0;
    padding: 20px;
    gap: 19px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side-caption,
  .sidebar-bottom {
    display: none;
  }
  .sidebar .wordmark {
    padding: 0;
  }
  .app-nav {
    flex-direction: row;
    overflow: auto;
    gap: 7px;
  }
  .app-nav a {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 14px;
  }
  .app-nav .icon {
    width: 17px;
    height: 17px;
  }
  .app-top {
    height: 58px;
    padding: 0 20px;
    font-size: 12px;
  }
  .app-account > span:not(.avatar) {
    display: none;
  }
  .app-content {
    padding: 25px 20px;
  }
  .app-heading {
    align-items: start;
    flex-wrap: wrap;
    gap: 17px;
  }
  .app-heading h1 {
    font-size: 1.9rem;
  }
  .app-heading p {
    font-size: 14px;
  }
  .app-heading .btn {
    font-size: 14px;
    white-space: normal;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
  .metric {
    padding: 18px 15px;
  }
  .metric > strong {
    font-size: 1.8rem;
  }
  .metric > span {
    font-size: 12px;
  }
  .metric small {
    font-size: 11px;
  }
  .app-columns,
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .panel-title,
  .panel-body {
    padding: 20px;
  }
  .panel-title h2 {
    font-size: 17px;
  }
  .panel-title > a,
  .panel-title > span {
    font-size: 12px;
  }
  .table-wrap {
    padding-bottom: 3px;
  }
  .document-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .document-card h2 {
    font-size: 18px;
  }
  .document-card p {
    font-size: 14px;
  }
  .message-row {
    padding: 20px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .message-row time {
    margin-left: 48px;
  }
  .kanban {
    grid-template-columns: 1fr;
  }
  .bar-chart {
    gap: 10px;
  }
  .chart-labels {
    font-size: 11px;
  }
  .calendar-wrap {
    overflow: auto;
  }
  .vanta .shell {
    width: calc(100% - 36px);
  }
  .vanta .site-head {
    height: auto;
    flex-wrap: wrap;
    padding: 23px 0 15px;
    gap: 16px;
  }
  .vanta .site-head .site-nav {
    width: 100%;
    margin: 0;
    gap: 24px;
    overflow: auto;
    padding-bottom: 5px;
    font-size: 14px;
  }
  .vanta .site-nav a {
    white-space: nowrap;
  }
  .vanta .nav-cta {
    padding: 8px 14px !important;
  }
  .vanta-hero {
    min-height: 630px;
    padding-block: 22px 28px;
  }
  .vanta-hero-top {
    align-items: start;
    gap: 15px;
  }
  .vanta-hero-top .eyebrow {
    font-size: 11px;
    max-width: 140px;
  }
  .motion-toggle {
    font-size: 11px;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .vanta h1 {
    font-size: clamp(4.6rem, 17vw, 8rem);
    line-height: 0.95;
    margin: 50px 0 35px;
    letter-spacing: -0.075em;
  }
  .vanta-art {
    object-position: 60% center;
    opacity: 0.72;
  }
  .vanta-hero:before {
    background:
      linear-gradient(90deg, #090c14db, transparent),
      linear-gradient(0deg, #090c14f0, transparent 65%);
  }
  .vanta-hero-bottom {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
  .vanta-hero-bottom p {
    font-size: 15px;
  }
  .vanta-strip {
    font-size: 14px;
    gap: 8px;
    padding-block: 20px;
  }
  .vanta .section {
    padding-block: 45px;
  }
  .section-head {
    display: block;
  }
  .section-head > p {
    margin-top: 20px;
  }
  .vanta h2 {
    font-size: 2.2rem;
  }
  .vanta-projects {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .project-block,
  .project-block:nth-child(2) {
    min-height: 310px;
    padding: 29px;
  }
  .project-block h2,
  .project-block h3 {
    font-size: 2.6rem;
  }
  .vanta-statement {
    padding-block: 45px;
  }
  .vanta-statement h2 {
    font-size: 3rem;
  }
  .vanta .subhero {
    padding-block: 35px 20px;
  }
  .vanta .subhero h1 {
    font-size: 2.8rem;
    letter-spacing: -0.05em;
    line-height: 1.1;
    margin: 20px 0;
  }
  .subhero > p {
    font-size: 16px;
  }
  .split-content {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 20px 45px;
  }
  .contact-panel {
    padding: 25px;
  }
  .contact-panel h2 {
    font-size: 1.8rem;
  }
  .network-canvas {
    height: 340px;
  }
  .lab-controls {
    gap: 12px;
  }
  .lab-controls .btn {
    font-size: 13px;
    padding: 10px 18px;
  }
  .lab-notes {
    padding-block: 30px;
  }
  .vanta .site-footer {
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
  }
  .pulse-head {
    padding: 20px 22px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .pulse-head .site-nav {
    margin-left: auto;
    font-size: 14px;
    gap: 23px;
  }
  .pulse-edition {
    display: none;
  }
  .pulse-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .pulse-hero > div {
    padding: 38px 25px;
    align-self: start;
  }
  .pulse-hero h1 {
    font-size: clamp(3.2rem, 13vw, 6rem);
    line-height: 1.03;
    margin: 23px 0;
  }
  .pulse-hero img {
    height: 340px;
    object-position: center;
    transform: none;
  }
  .pulse-caption {
    bottom: 13px;
    right: 13px;
    font-size: 11px;
    max-width: calc(100% - 26px);
  }
  .pulse-hero > div > p {
    font-size: 16px;
  }
  .pulse-sound {
    padding: 42px 25px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .pulse-sound h2 {
    font-size: 4rem;
    line-height: 1.02;
  }
  .pulse-sound > div > p {
    font-size: 16px;
  }
  .pulse-features {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
  }
  .pulse-features article {
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }
  .pulse-features p {
    font-size: 15px;
    margin: 0;
  }
  .pulse-features h3 {
    font-size: 20px;
    margin-top: 12px;
  }
  .pulse-details {
    padding: 40px 25px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .pulse-details h2 {
    font-size: 2rem;
  }
  .pulse-details dl {
    gap: 27px;
  }
  .pulse-details dd {
    font-size: 16px;
  }
  .pulse-buy {
    padding: 45px 25px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .pulse-buy h2 {
    font-size: 2.5rem;
  }
  .pulse-order {
    padding: 23px;
  }
  .package-options {
    flex-direction: column;
  }
  .package-options button {
    text-align: left;
    padding: 14px 17px;
    font-size: 16px;
  }
  .package-options button span {
    font-size: 13px;
    margin-top: 6px;
  }
  .pulse-price output {
    font-size: 35px;
  }
  .pulse-footer {
    flex-direction: column;
    padding: 25px;
    gap: 10px;
  }
  .cliento .metric-grid {
    grid-template-columns: 1fr;
  }
  .client-project {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 25px;
  }
  .client-project h2 {
    font-size: 1.75rem;
  }
  .cliento .app-heading h1 {
    font-size: 1.9rem;
  }
  .cliento .sidebar .wordmark {
    font-size: 24px;
  }
  .cliento .wordmark small {
    font-size: 9px;
  }
  .team-welcome {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 0;
  }
  .team-welcome h1 {
    font-size: 3.7rem;
  }
  .team-highlight {
    padding: 28px;
    transform: none;
    border-radius: 15px;
  }
  .team-highlight strong {
    font-size: 2rem;
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-grid .section-head > span {
    display: block;
    margin-top: 10px;
  }
  .news-card {
    padding: 25px;
  }
  .news-card h3 {
    font-size: 24px;
  }
  .quick-card {
    padding: 25px;
  }
  .team-tip {
    margin-top: 20px;
  }
  .knowledge-grid,
  .people-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .knowledge-card,
  .person-card {
    padding: 27px;
  }
  .teamspace .workspace-nav {
    gap: 23px;
  }
  .teamspace .workspace-nav .icon {
    display: none;
  }
  .teamspace .app-heading h1 {
    font-size: 2.2rem;
  }
  .werkflow .app-layout {
    display: block;
  }
  .werkflow .sidebar {
    padding: 18px 20px;
    gap: 18px;
  }
  .werkflow .sidebar .wordmark {
    text-align: left;
    font-size: 26px;
  }
  .werkflow .app-nav {
    flex-direction: row;
    gap: 8px;
  }
  .werkflow .app-nav a {
    flex-direction: row;
    font-size: 14px;
    padding: 10px 13px;
    gap: 8px;
  }
  .werkflow .app-nav .icon {
    width: 17px;
    height: 17px;
  }
  .werkflow .app-content {
    padding: 25px 20px;
  }
  .werkflow .app-heading h1 {
    font-size: 2rem;
  }
  .werkflow .metric > strong {
    font-size: 2rem;
  }
  .werkflow .kanban-col {
    padding: 20px;
  }
  .werkflow .metric {
    padding: 18px;
  }
  .evidenz .workspace-head {
    padding: 20px 22px;
  }
  .evidenz .workspace-nav {
    gap: 25px;
  }
  .evidenz .workspace-nav .icon {
    display: none;
  }
  .evidenz .app-heading h1 {
    font-size: 1.9rem;
  }
  .ledger-summary {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding-block: 23px;
  }
  .ledger-summary > div {
    padding: 0;
    border: 0;
  }
  .ledger-summary strong {
    font-size: 25px;
  }
  .ledger-toolbar {
    flex-wrap: wrap;
    gap: 17px;
  }
  .ledger-toolbar label {
    flex-direction: column;
    align-items: start;
    gap: 7px;
    width: 100%;
    order: 3;
  }
  .ledger-toolbar input {
    width: 100%;
  }
  .ledger-footer {
    flex-direction: column;
    gap: 8px;
  }
  .order-meta {
    grid-template-columns: 1fr 1fr;
    padding: 22px;
    gap: 23px;
  }
  .order-total {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
  }
  .order-total span {
    font-size: 13px;
  }
  .booking-intro {
    padding-top: 0;
  }
  .booking-intro h1 {
    font-size: 2.8rem;
  }
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .booking-services {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .booking-services > button {
    padding: 23px;
  }
  .booking-services strong {
    font-size: 17px;
  }
  .booking-services small {
    font-size: 13px;
  }
  .date-choice {
    gap: 8px;
  }
  .date-choice button {
    padding: 13px 8px;
  }
  .date-choice strong {
    font-size: 25px;
  }
  .time-choice {
    gap: 8px;
  }
  .time-choice button {
    padding: 11px 10px;
    font-size: 14px;
  }
  .booking-summary {
    position: static;
    padding: 28px;
  }
  .booking-summary h2 {
    font-size: 25px;
  }
  .booking-summary .btn {
    font-size: 14px;
  }
  .booking-cards > article {
    padding: 23px;
    gap: 17px;
    flex-wrap: wrap;
  }
  .booking-cards h2 {
    font-size: 19px;
  }
  .booking-cards .status {
    margin-left: 51px;
  }
  .tempo .workspace-nav .icon {
    display: none;
  }
  .tempo .app-heading h1 {
    font-size: 1.9rem;
  }
  .stagekit .workspace-nav {
    gap: 25px;
  }
  .stage-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stage-heading h1 {
    font-size: 2.7rem;
    line-height: 1.12;
    letter-spacing: -0.06em;
    overflow-wrap: anywhere;
  }
  .stage-heading p {
    font-size: 15px;
  }
  .stage-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .stage-options label {
    padding: 18px 16px;
    gap: 14px;
  }
  .stage-options strong {
    font-size: 14px;
  }
  .stage-options small {
    font-size: 12px;
  }
  .stage-options legend {
    font-size: 14px;
  }
  .stage-summary {
    position: static;
    padding: 30px;
  }
  .stage-summary h2 {
    font-size: 2.2rem;
  }
  .stage-summary .btn {
    font-size: 13px;
  }
  .stage-packages {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stage-packages article {
    padding: 28px;
  }
  .stage-packages p {
    font-size: 15px;
  }
  .stage-offer {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 27px;
  }
  .stage-offer output {
    font-size: 3.5rem;
  }
  .stagekit .app-heading h1 {
    font-size: 2rem;
    letter-spacing: -0.05em;
    overflow-wrap: anywhere;
  }
  .stagekit .app-heading .btn {
    font-size: 13px;
  }
  .spectra-workbench {
    grid-template-columns: 1fr;
  }
  .spectra-settings {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 25px;
  }
  .spectra-settings label {
    margin-bottom: 23px;
  }
  .spectra-settings .sensor-stat {
    display: inline-block;
    min-width: 45%;
    padding-right: 15px;
    vertical-align: top;
  }
  .spectra-settings .sensor-stat strong {
    font-size: 24px;
  }
  .spectra-settings > small {
    display: block;
    margin-top: 12px;
  }
  .spectra-plot {
    padding: 18px;
  }
  .spectra-plot svg {
    min-height: 160px;
  }
  .plot-title {
    font-size: 10px;
    gap: 15px;
  }
  .plot-legend {
    font-size: 10px;
    gap: 16px;
  }
  .spectra-console {
    padding: 16px;
  }
  .spectra-console p {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .spectra-note {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 30px 0;
  }
  .spectra-note h2 {
    font-size: 25px;
  }
  .spectra-note p {
    font-size: 15px;
  }
  .spectra .workspace-nav .icon {
    width: 15px;
    height: 15px;
  }
  .spectra .workspace-nav {
    gap: 26px;
  }
  .spectra .workspace-nav a {
    font-size: 13px;
  }
  .spectra .app-heading h1 {
    font-size: 1.8rem;
    line-height: 1.25;
  }
  .lexa .workspace-head {
    padding: 20px 22px;
  }
  .lexa .workspace-nav {
    gap: 25px;
  }
  .lexa .workspace-nav a {
    font-size: 16px;
  }
  .lexa-intro {
    text-align: left;
    margin: 0 0 30px;
  }
  .lexa-intro h1 {
    font-size: 2.6rem;
    line-height: 1.2;
  }
  .lexa-intro p {
    font-size: 16px;
  }
  .lexa-editor {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .editor-bar {
    padding: 17px 22px;
    font-size: 10px;
    gap: 10px;
  }
  .lexa textarea {
    font-size: 18px;
    padding: 24px;
    min-height: 390px;
    line-height: 1.8;
  }
  .editor-footer {
    padding: 17px 22px;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
  }
  .writing-analysis {
    padding: 28px;
  }
  .writing-metrics {
    gap: 60px;
  }
  .writing-analysis > small {
    font-size: 13px;
  }
  .lexa-checks {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .lexa .app-heading h1 {
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .glossary-list article {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0;
  }
  .glossary-list article > span {
    font-size: 25px;
  }
  .glossary-list h2 {
    font-size: 22px;
  }
  .glossary-list p {
    font-size: 16px;
  }
  .lexa .btn {
    font-size: 15px;
  }
  .app-notice {
    font-size: 11px;
  }
  .panel-title a {
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reactive-surface img {
    transform: none !important;
  }
  .motion-enhanced .reveal-item:not(.revealed) {
    opacity: 1;
    transform: none;
  }
}

/* Keep every demo navigation item visible on small screens. */
@media (max-width: 760px) {
  .vanta .site-head .site-nav,
  .workspace-nav,
  .app-nav {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 8px;
  }
  .vanta .site-head .site-nav {
    column-gap: 20px;
  }
  .workspace-nav {
    column-gap: 22px;
  }
  .app-nav {
    column-gap: 5px;
  }
  .werkflow .app-nav {
    row-gap: 5px;
  }
  .pulse-head .site-nav {
    flex-wrap: wrap;
  }
}

.network-canvas {
  cursor: grab;
}
.network-canvas.is-dragging {
  cursor: grabbing;
}